import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Icon from './components/Icon';
import Discover from './components/Discover';
import Post from './components/Post';
import Thread from './components/Thread';
import LoginButton from './components/LoginButton';
import Footer from './components/Footer';

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


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