import React, { Component } from 'react';
import history from './history'

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link
} from 'react-router-dom';

class App extends Component {
  render() {
    return (
        <Router history={history}>
          <div>
            <Link to="/">
              <button>Go to home</button>
            </Link>
          <Switch>
            <Route exact path="/other" component={() => <Other/>} />
            <Route path="/" component={() => <Home/>} />
          </Switch>
          </div>
        </Router>
    );
  }
}

class Home extends Component {
  render() {
    return (
        <div>
          THIS IS HOME WOO!
          <div>
              <Route exact path="/" component={() => <HomeController/>} />
              <Route exact path="/about" component={() => <About/>} />
              <Route exact path="/click-page" component={() => <ClickPage/>} />
          </div>
        </div>
    );
  }
}

class HomeController extends Component {
  render() {
    return (
      <div>
        <Link to="/about">
          <button>Go to about</button>
        </Link>
        <Link to="/click-page">
          <button>Go to click page</button>
        </Link>
      </div>
    );
  }
}

class About extends Component {
  render() {
    return (
      <div>
        ABOUT
      </div>
    );
  }
}

function clickHandler(){
  console.log("doing stuff");
  history.push('/about');
}

class ClickPage extends Component {
  render() {
    return (
      <button onClick={clickHandler}>
        DO SOMETHING THEN GO TO ABOUT
      </button>
    );
  }
}

class Other extends Component {
  render() {
    return (
      <div>
        OTHER
      </div>
    );
  }
}

export default App;