import React, { Component } from 'react';
import { Router, Route, Link, NavLink} from 'react-router-dom';
import FontAwesome from 'react-fontawesome';
import createHistory from 'history/createBrowserHistory';
import MainPageComponent from './MainPageComponent';
import AddTestComponent from './AddTestComponent';
import TestComponent from './TestComponent';


export default class MainComponent extends Component {
  constructor(props){
    super(props);
    this.state = {

      isAdaptiveMenuOpen: false
    }
  }
  render(){
    return(
      <Router history={createHistory()}>
        <div className="main-component">
          <nav>
            <div className="container">
              <div className="nav-adaptive-btn">
                <FontAwesome name="bars" onClick={this.toggleAdaptiveMenu}/>
              </div>
              <div ref="navLinks" className={`nav-links ${this.state.isAdaptiveMenuOpen? 'open-adaptive-menu':''}`}>
                <li onClick={this.toggleAdaptiveMenu}><NavLink exact to="/" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Main Page</NavLink></li>
                <li onClick={this.toggleAdaptiveMenu}><NavLink to="/addTest" activeStyle={{backgroundColor: 'rgb(232,232,232)'}}>Add New Test</NavLink></li>
              </div>
            </div>
          </nav>

            <Route exact path="/" render={(props)=>(
            <MainPageComponent {...props} toggleAdaptiveMenu={this.toggleAdaptiveMenu}/>
            )}></Route>
            <Route path="/addTest" component={AddTestComponent}></Route>
            <Route path="/test/:id" component={TestComponent}></Route>
        </div>
      </Router>
    )
  }
  // custom functions
  toggleAdaptiveMenu = () => {
    if(this.state.isAdaptiveMenuOpen){
      this.setState({isAdaptiveMenuOpen: false});
    } else{
      this.setState({isAdaptiveMenuOpen: true});
    }
  }
}
