/* Polyfills for IE */
import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* App starts here */
import React from "react";
import { withRouter, NavLink, Route, Switch } from "react-router-dom";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

import "bootstrap/dist/css/bootstrap.min.css";

import Board from "./Board.js";
import './modest.css';
import "./App.css";

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

  componentDidMount() {
  }

  render() {
    return (
      <div className="Header">
        <div className="Group">
          <Logo/>
          <div className="Heading">
            <div className="Subtitle">Visual Technology Team</div>
            <div className="Title">Software Solutions</div>
          </div>
        </div>
        <div className="Pages">
          <NavLink className="Link" activeClassName="Highlight" key="drivers" to="/drivers">Drivers</NavLink>
          <NavLink className="Link" activeClassName="Highlight" key="solutions" to="/solutions">Solutions</NavLink>
          <NavLink className="Link" activeClassName="Highlight" key="technologies" to="/technologies">Technologies</NavLink>
          <NavLink className="Link" activeClassName="Highlight" key="releases" to="/releases">Releases</NavLink>
          <NavLink className="Link" activeClassName="Highlight" key="internal" to="/internal">Internal Info</NavLink>
        </div>
      </div>
    );
  }
}

class Logo extends React.Component {
  render() {
    return <NavLink to="/"><div className="Logo"></div></NavLink>
  }
}

class Footer extends React.Component {
  constructor(props) {
    super(props);
    this.toggleDebug = this.toggleDebug.bind(this);
  }

  toggleDebug() {
    if (window.location.search.match(/debug/)) {
      window.location.search = "";
    } else {
      window.location.search = "debug";
    }
  }

  render() {
    return (
      <div className="Footer">
        <div className="Lizard" onClick={this.toggleDebug}></div>
      </div>
    );
  }
}

function noChange() {};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.props.history.listen((location, action) => {});
  }

  componentDidMount() {
    const location = this.props.history.location.pathname;
    console.log(`App.mounted at ${location}`);
  }

  hidePopup() {
    this.setState({
      modalShown: false
    });
  }

  render() {
   
    return (
      <div className="App" ref={ ref => (this.app = ref) }>
        { /* <Header/> */ }
        <div className="Body">
          <Board/>
        </div>
        { /* <Footer/> */ }
      </div>
    );
  }
}

export default withRouter(App);
