import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
import * as qs from 'query-string';

import Icon from './components/Icon';
import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds';
import Settings from './components/Settings';
import Contacts from './components/Contacts';
import Chat from './components/Chat';
import Post from './components/Post';
import Thread from './components/Thread';
import LoginButton from './components/LoginButton';
import Footer from './components/Footer';
import Avatar from './components/Avatar';

const elClassHidden = 'header--hidden'
const elClassBackground = 'header--background';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.auth = this.auth.bind(this);
    this.state = {
      visitor: {
        uid: Number(window.localStorage.uid) || 0,
        hash: window.localStorage.hash || ''
      },
      headerClassName: ''
    };
    this.dHeight = 0;
    this.wHeight = 0;
    this.wScrollCurrent = 0;
    this.wScrollBefore = 0;
    this.wScrollDiff = 0;
  }

  componentDidMount() {
    window.addEventListener('scroll', this.throttle(500, () => {
      this.dHeight = document.body.offsetHeight;
      this.wHeight = window.innerHeight;
      this.wScrollCurrent = window.pageYOffset;
      this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;

      if (this.wScrollCurrent <= 0) {
        // scrolled to the very top; element sticks to the top
        this.setState({
          headerClassName: ''
        })
      } else if (this.wScrollDiff > 0 && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
        // scrolled up; element slides in
        this.setState({
          headerClassName: elClassBackground
        })
      } else if (this.wScrollDiff < 0) {
        // scrolled down
        if (this.wScrollCurrent + this.wHeight >= this.dHeight && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
          // scrolled to the very bottom; element slides in
          this.setState({
            headerClassName: elClassBackground
          })
        } else {
          // scrolled down; element slides out
          this.setState({
            headerClassName: [elClassHidden, elClassBackground].join(' ')
          })
        }
      }
      this.wScrollBefore = this.wScrollCurrent;
    }));
    this.auth(this.state.visitor.hash)
  }
  throttle(delay, fn) {
    var last, deferTimer;
    return function () {
      var context = this, args = arguments, now = +new Date;
      if (last && now < last + delay) {
        clearTimeout(deferTimer);
        deferTimer = setTimeout(
          function () {
            last = now;
            fn.apply(context, args);
          },
          delay);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  };
  render() {
    const user = this.state.visitor;
    return (
      <Router>
        <React.Fragment>
          <header className={this.state.headerClassName}>
            <div id="header_wrapper">
              {user.uid > 0 ?
                <div id="ctitle">
                  {user.uname ? <Avatar user={user} /> : <Icon name="ei-spinner" size="m" />}
                </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>
                  {user.uid > 0 ?
                    <li><Link to={{ pathname: '/discussions' }}><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>
                    {user.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>
          <div id="wrapper">
            <section id="content">
              <Switch>
                <Route exact path="/" render={(props) => <Discover visitor={user} {...props} />} />
                <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} />
                <Route exact path="/discussions" render={(props) =>
                  <Discussions visitor={user} {...props} />
                } />
                <Route exact path="/settings" render={(props) =>
                  <Settings visitor={user} {...props} />
                } />
                <Route exact path="/_fblogin" render={(props) => {
                  let params = qs.parse(props.location.search)
                  this.auth(params.hash)
                  return <Redirect to="/" />
                }} />
                <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
                <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
                <Route exact path="/pm/:user" render={(props) => <Chat visitor={user} {...props} />} />
                <Route exact path="/:user" render={(props) => <Blog visitor={user} {...props} />} />
                <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
                <Route exact path="/:user/:mid" render={(props) => <Thread visitor={user} {...props} />} />
              </Switch>
            </section>
            <aside id="column">
              {
                user.uid > 0 &&
                <React.Fragment>
                  <ul>
                    <li>
                      <Link to="/home">
                        <Icon name="ei-clock" size="s" />My feed
                      </Link>
                    </li>
                    <li>
                      <Link to="/pm">
                        <Icon name="ei-envelope" size="s" />PM
                      </Link>
                    </li>
                    <li>
                      <Link to={`/${user.uname}/?show=recomm`} rel="nofollow">
                        <Icon name="ei-heart" size="s" />Recommendations
                      </Link>
                    </li>
                    <li>
                      <Link to={`/${user.uname}/?show=photos`} rel="nofollow">
                        <Icon name="ei-camera" size="s" />Photos
                      </Link>
                    </li>
                    <li>
                      <Link to="/settings" rel="nofollow">
                        <Icon name="ei-gear" size="s" />Settings
                      </Link>
                    </li>
                  </ul>
                  <hr />
                  <form>
                    <p><input type="text" name="search" className="inp" placeholder="Search..." /></p>
                  </form>
                  <hr />
                  <div id="ustats">
                    <ul>
                      <li><Link to={`/${user.uname}/friends`}>I read: {user.statsIRead}</Link></li>
                      <li><Link to={`/${user.uname}/readers`}>My readers: {user.statsMyReaders}</Link></li>
                      {
                        user.statsMyBL &&
                        <li><Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link></li>
                      }
                      <li>Messages: {user.statsMessages}</li>
                      <li>Comments: {user.statsReplies}</li>
                    </ul>
                    {
                      user.iread &&
                      <div className="iread">
                        {
                          user.iread.map(u => <Avatar user={u} />)
                        }
                      </div>
                    }
                  </div>
                </React.Fragment>
              }
            </aside>
          </div>
          <Footer />
        </React.Fragment>
      </Router>
    )
  }
  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;
          window.localStorage.uid = visitor.uid;
          this.setState({
            visitor: visitor
          })
        })
    }
  }
}

let container = document.createElement('div');
ReactDOM.render(<App />, container);
let body = document.getElementById('wrapper').parentNode;
body.replaceChild(container.getElementsByTagName('header')[0], body.querySelector('#header'));
body.replaceChild(container.querySelector('#wrapper'), body.querySelector('#wrapper'));
body.replaceChild(container.querySelector('#footer'), body.querySelector('#footer'));