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

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

  render () {
    return (
      <Tab.Container id="releases-table" defaultActiveKey="20q1.06">
        <Row>
          <Col sm={3}>
            <Nav variant="pills" className="flex-column">
              <Nav.Item>
                <Nav.Link eventKey="20q1.06">2020-02-07</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="19q4.52">2019-12-14</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="19q4">2019-11-11</Nav.Link>
              </Nav.Item>
            </Nav>
          </Col>

          <Col sm={9} id="releases-content">
            <Tab.Content>
              <Tab.Pane eventKey="20q1.06">
                <MarkdownLoader src="releases/releases-20Q1.06.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="19q4.52">
                <MarkdownLoader src="releases/releases-19Q4.52.md"/>
              </Tab.Pane>
              <Tab.Pane eventKey="19q4">
                <MarkdownLoader src="releases/releases-19Q4.md"/>
              </Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    )
  }
}

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

  render () {
    return (
      <div className="Content OnScreen" id="Content">
        <div id="MinBox">
          <Markdown source="
  Select the release below for information about the packages published.
          "/>
          <ReleasePicker/>
        </div>
      </div>
    );
  }
}

export default Releases;
