import React, { Component } from 'react';
import './App.css';
import logo from './logo.png';
import {BrowserRouter as Router, Switch, Route, NavLink} from 'react-router-dom';
import Barba from 'barba.js';
import Home from './Home.js';
import Theatre from './Theatre.js';
import About from './About.js';
import Contact from './Contact.js';
import Sketchbook from './Sketchbook.js';
import Gallery from './Gallery.js';


let RenderNav = () => {
 return (
   <div>
   <i className={this.state.class} id="bars" onMouseEnter = {this.onNavEnter} onMouseLeave = {this.onNavLeave}></i>
   <NavLink to = '/'>Home</NavLink>
   <NavLink to = '/About/'>About</NavLink>
   <NavLink to = '/Theatre/'>Theatre</NavLink>
   <NavLink to = '/Contact/'>Contact</NavLink>
   </div>
 )
}

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      class: "fa fa-bars fa-2x",
    };
    this.onNavEnter = this.onNavEnter.bind(this);
    this.onNavLeave = this.onNavLeave.bind(this);
  }
  componentDidMount = () => {
    console.log('Component Did Mount!');
    Barba.Pjax.start();
  }
  onNavEnter = () => {
   console.log('awake!');
  }

  onNavLeave = () => {
  console.log('goodbye');
  }

  render() {
    return (
      <Router>
       <div id="barba-wrapper">
        <div className="barba-container">
        <RenderNav />
         <Switch>
           <Route exact path = '/' component={Home} />
           <Route exact path = '/About/' component={About} />
           <Route exact path = '/Contact/' component={Contact} />
           <Route exact path = '/Theatre/' component = {Theatre} />
           <Route exact path = '/Sketchbook/' component={Sketchbook} />
            <Route path = '/Gallery/' component={Gallery} />
         </Switch>
         <img src={logo} className="somersetLogo" alt="somersetLogo" />
         </div>
         </div>
      </Router>
    );
  }
}

export default App;