import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

import Discover from "./components/Discover"
import Post from "./components/Post"
import Thread from "./components/Thread"
import LoginButton from "./components/LoginButton"

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visitor: { uid: 0 }
    }
  }
  render() {
    return (
      <Router>
        <div className="wrapper">
          <header>
            <div id="header_wrapper">
              <div id="logo"><Link to="/">Juick</Link></div>
              <nav id="global">
                <ul>
                  {this.state.visitor.uid ?
                    <li><Link to={{ pathname: "/", search: "?show=discuss"}}><i data-icon="ei-comment" data-size="s"></i>Discuss</Link></li>
                    :
                    <li><Link to={{ pathname: "/", search: "?media=1"}} rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>Photos</Link></li>
                  }
                  <li><Link to="/" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>Discover</Link></li>
                  <li>
                    {this.state.visitor.uid ? 
                    <Link to="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>Post</Link>
                    :
                    <LoginButton title="Login" onAuth={this.auth.bind(this)} />
                    }
                  </li>
                </ul>
              </nav>
              <div id="search">
                <form action="/">
                  <input name="search" className="text"
                    placeholder="Search..." />
                </form>
              </div>
            </div>
          </header>
          <Route exact path="/" component={Discover} />
          <Route path="/:user/:mid" component={Thread} />
          <Route path="/post" component={Post} />          
        </div>
      </Router>
    )
  }
  auth(data) {
    console.log(data)
  }
}


ReactDOM.render(<App />, document.getElementById("wrapper"));