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.auth = this.auth.bind(this);
    this.state = {
      visitor: { uid: 0 }
    };
    this.auth(window.localStorage.hash || '')
  }
  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.uname}`}>
                      <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
                    </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="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
            <Route path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
            <Route path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
          </div>
        </Router>
        <Footer />
      </React.Fragment>
    )
  }
  auth(data) {
    if (data) {
      window.localStorage.hash = data;
      fetch(`https://api.juick.com/users?hash=${data}`)
        .then(response => {
          return response.json()
        })
        .then(users => {
          let visitor = users[0]
          visitor.hash = data
          this.setState({
            visitor: visitor
          })
        })
    }
  }
}


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