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';

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">
              {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>
    )
  }
  auth(data) {
    console.log(data)
  }
}


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