/* App starts here */
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown/with-html";
import CodeBlock from "./CodeBlock";
import MarkdownLoader from "./markdown-loader";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import { lookupIntelGPU } from "./intel-gpu-info";

import "./drivers.css";

import { intelGPUs } from './intel-gpu-info.js';


class HardwareTable extends React.Component {
  constructor(props) {
    super(props);

  }

  render () {
/*    const GPUs = intelGPUs.filter((item) => {
      return item.
    })*/
    return (
      <>
        <Row>
          <ReactMarkdown className="Markdown" source="
If you aren't sure which graphics product you have, you can use the [Identify Hardware](#identify-hardware) tool.
            "/>
        </Row>
        { (this.props.device) && <Row><div> Filtering by { this.props.device } </div></Row> }
        <Row>
            <Col sm={3}>
              Graphics
            </Col>
            <Col sm={6}>
              test two
            </Col>
        </Row>
      </>
    )
  }
}

class OSPicker extends React.Component {
  constructor(props) {
    super(props);
    console.log("OSPicker: " + props.device);
    this.clearFilter = this.clearFilter.bind(this);
  }

  clearFilter() {
    if (window.clearFilter) {
      window.clearFilter();
    }
  }

  render() {
    const id = parseInt("0x" + (this.props.device || "0")),
      device = lookupIntelGPU(id);
    let suffix;
    if (device) {
      switch (device.gen) {
        case 1:
          suffix = "st";
          break;
        case 2:
          suffix = "nd";
          break;
        default:
          suffix = "th";
          break;
      }
    }

    return (
      <Tabs id="os-support-table">
        <Tab eventKey="linux" title="Linux">
          <MarkdownLoader src={ "drivers/overview.md" }/>
          <Tabs defaultActiveKey="ubuntu" id="os-distro-table">
            {/*<Tab eventKey="centos" title="CentOS">
              <Tabs defaultActiveKey="centos-8.0" id="os-distro-table">
                <Tab eventKey="centos-8.0" title="8.0">
                  <MarkdownLoader src={ "drivers/centos-8.0.md" }/>
                </Tab>
                <Tab eventKey="centos-7.x" title="7.x">
                  { (device) &&
                      <>
                      <p><b>Hardware selected:</b> PCI device ID 8086:{ device.id.toString(16).replace(/0x/, "") } is
                      a { device.gen }<sup>{ suffix }</sup> generation { device.name }. <button onClick={clearFilter}>clear</button>
                      </p>
                    </>
                  } {
                    (device && device.gen > 8) &&
                      <ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="

Supported by CentOS 7.7.

CentOS should recognize this hardware and install the necessary drivers automatically.
"/>
                  } {
                    (device && device.gen <= 8) &&
                      <ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="

Not supported by CentOS 7.7. To use this hardware with CentOS 7.7 you will need a custom kernel.

**Recommended**: Use CentOS 8 or newer.
"/>
                  } { (!device) && <MarkdownLoader src={ "drivers/centos-7.md" }/> }
                </Tab>
              </Tabs>
            </Tab>*/}
            <Tab eventKey="redhat" title="Red Hat">
              <Tabs defaultActiveKey="redhat-8.0" id="os-distro-table">{/*
                <Tab eventKey="redhat-8.1" title="8.1">
                  <MarkdownLoader src={ "drivers/redhat-8.1.md" }/>
                </Tab>
                */}<Tab eventKey="redhat-8.0" title="8.0">
                  <MarkdownLoader src={ "drivers/redhat-8.0.md" }/>
                </Tab>
                <Tab eventKey="redhat-7.x" title="7.x">
                  <MarkdownLoader src={ "drivers/redhat-7.md" }/>
                </Tab>
              </Tabs>
            </Tab>
            <Tab eventKey="suse" title="SUSE">
              <Tabs defaultActiveKey="suse-15-sp1" id="os-distro-table">
                <Tab eventKey="suse-15-sp1" title="15 SP1">
                  <MarkdownLoader src={ "drivers/suse-15-sp1.md" }/>
                </Tab>
              </Tabs>
            </Tab>
            <Tab eventKey="ubuntu" title="Ubuntu">
            <Tabs defaultActiveKey="ubuntu-19.10" id="os-distro-table">
                <Tab eventKey="ubuntu-19.10" title="19.10 (eoan)">
                  <MarkdownLoader src={ "drivers/ubuntu-eoan.md" }/>
                </Tab>
                <Tab eventKey="ubuntu-19.04" title="19.04 (disco)">
                  <MarkdownLoader src={ "drivers/ubuntu-disco.md" }/>
                </Tab>
                <Tab eventKey="ubuntu-18.04" title="18.04 (bionic)">
                  <MarkdownLoader src={ "drivers/ubuntu-bionic.md" }/>
                </Tab>
              </Tabs>
            </Tab>
            <Tab eventKey="other" title="Other...">
              <MarkdownLoader src={ "drivers/other.md" }/>
            </Tab>
          </Tabs>
        </Tab>
        <Tab eventKey="windows" title="Windows">
          <MarkdownLoader src={ "drivers/windows.md" }/>
        </Tab>
        {/*<Tab eventKey="hardware" title="Hardware">
           <HardwareTable device={ this.props.device }/>
        </Tab>*/}
      </Tabs>
    )
  }
}

class Drivers extends React.Component {
  constructor(props) {
    super(props);
    console.log("Drivers: " + props.device);
  }

  render () {
    return (
      <div className="Content OnScreen" id="Content">
        <ReactMarkdown renderers={{ code: CodeBlock }} className="Markdown" source="
# Drivers for Intel graphics technology
        "/>
{/*Select either the operating system you are looking for, or select Hardware to see a table of OS support.*/}
        <div id="MinBox">
          <OSPicker device={ this.props.device }/>
        </div>
      </div>
    );
  }
}

export default Drivers;
