/* 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 "./internal.css";

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

  render () {
    return (
      <Tab.Container id="topics-table" defaultActiveKey="running-internal">
        <Row>
          <Col sm={3}>
            <Nav variant="pills" className="flex-column">
              <Nav.Item>
                <Nav.Link eventKey="running-internal">Running internal...</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="what-is-agama">What is Agama?</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="os-support-dates">OS Support Dates</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="zero-to-hero">'Web: Zero to Hero' slides</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="additional-info">Additional information</Nav.Link>
              </Nav.Item>
            </Nav>
          </Col>

          <Col sm={9} id="topics-content">
            <Tab.Content>
              <Tab.Pane eventKey="running-internal">
                <MarkdownLoader src="topics/running-internal.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="what-is-agama">
                <MarkdownLoader src="topics/what-is-agama.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="os-support-dates">
                <MarkdownLoader src="topics/os-support-dates.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="zero-to-hero">
                <MarkdownLoader src="topics/zero-to-hero.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="additional-info">
                <MarkdownLoader src="topics/support.md"/>
              </Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    )
  }
}

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

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

export default Internal;
