/* App starts here */
import React, { useState, useEffect } from "react";
import Markdown from "react-markdown/with-html";
import Nav from "react-bootstrap/Nav";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Tab from "react-bootstrap/Tab";
import MarkdownLoader from "./markdown-loader.js";

import "./technologies.css";

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

  render () {
    return (
      <Tab.Container id="technologies-table" defaultActiveKey="level-zero">
        <Row>
          <Col sm={3}>
            <Nav variant="pills" className="flex-column">
              <Nav.Item>
                <Nav.Link eventKey="level-zero">Level-Zero</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="mediadriver">Media Driver</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="mediasdk">Media SDK</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="mesa">Mesa</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="opencl">Open CL</Nav.Link>
              </Nav.Item>
            </Nav>
          </Col>

          <Col sm={9} id="technologies-content">
            <Tab.Content>
              <Tab.Pane eventKey="default">
              <Markdown className="Markdown" source={[
"# Technologies",
"",
"Providing the latest innovations on Intel graphics hardware requires coordination",
"with several projects."
              ].join("\n")}/>
              </Tab.Pane>
              <Tab.Pane eventKey="level-zero">
                <MarkdownLoader src="technologies/level-zero.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="mediasdk">
                <MarkdownLoader src="technologies/mediasdk.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="mediadriver">
                <MarkdownLoader src="technologies/mediadriver.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="mesa">
                <MarkdownLoader src="technologies/mesa.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="opencl">
                <MarkdownLoader src="technologies/opencl.md"/>
              </Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    )
  }
}

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

  render () {
    return (
      <div className="Content OnScreen" id="Content">
        <div id="MinBox">
          <TechnologyPicker/>
        </div>
      </div>
    );
  }
}

export default Technologies;
