import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import ReactRouterPropTypes from 'react-router-prop-types';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import qs from 'qs';

import Icon from './components/Icon';
import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds';
import { Friends, Readers } from './components/Users';
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 { UserLink } from './components/UserInfo';
import Header from './components/Header';
import SearchBox from './components/SearchBox';

import cookies from 'react-cookies';

import { me } from './api';

export default function App(props) {
  let params = qs.parse(window.location.search.substring(1));
  if (params.hash) {
    cookies.save('hash', params.hash, { path: '/' });
    window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`);
  }
  const [visitor, setVisitor] = useState({
    uid: 0,
    hash: cookies.load('hash')
  });

  let updateStatus = () => {
    // refresh server visitor state (unread counters)
    me().then(visitor => {
      setVisitor(visitor);
    });
  };

  const [es, setEs] = useState();
  useEffect(() => {
    const { hash } = visitor;
    if (hash) {
      me().then(visitor => auth(visitor));
    }
    const eventParams = { hash: visitor.hash };
    let url = new URL(`https://api.juick.com/events?${qs.stringify(eventParams)}`);
    let es = new EventSource(url);
    es.onopen = () => {
      console.log('online');
      es.addEventListener('read', updateStatus);
    };
    es.onerror = () => {
      es.removeEventListener('read', updateStatus);
    };
    setEs(es);
  }, []);


  let search = (history, pathname, searchString) => {
    let location = {};
    location.pathname = pathname;
    location.search = `?search=${searchString}`;
    history.push(location);
  };
  let auth = (visitor) => {
    setVisitor(visitor);
  };
  return (
    <Router>
      <>
        <Header>
          <div id="header_wrapper">
            {
              visitor.uid > 0 ?
                <UserLink user={visitor} />
                : <div id="logo">
                  <Link to="/">Juick</Link>
                </div>
            }
            <div id="search" className="desktop">
              <SearchBox pathname="/discover" onSearch={search} {...props} />
            </div>
            <nav id="global">
              {visitor.uid > 0 ?
                <Link to={{ pathname: '/' }}>
                  <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
                  {
                    visitor.unreadCount &&
                    <span className="badge">{visitor.unreadCount}</span>
                  }
                </Link>
                :
                <Link to='/?media=1' rel="nofollow">
                  <Icon name="ei-camera" size="s" />
                  <span className="desktop">Photos</span>
                </Link>
              }
              <Link to={{ pathname: '/discover' }} rel="nofollow">
                <Icon name="ei-search" size="s" />
                <span className="desktop">Discover</span>
              </Link>

              {visitor.uid > 0 ?
                <Link to={{ pathname: '/post' }}>
                  <Icon name="ei-pencil" size="s" />
                  <span className="desktop">Post</span>
                </Link>
                :
                <LoginButton title="Login" onAuth={auth} />
              }
            </nav>
          </div>
        </Header>
        <section id="content">
          <Switch>
            <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
            <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} />
            <Route exact path="/discover" render={(props) =>
              <Discover visitor={visitor} {...props} />
            } />
            <Route exact path="/settings" render={(props) =>
              <Settings visitor={visitor} {...props} onChange={auth} />
            } />
            <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} />
            <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} />
            <Route exact path="/pm/:user" render={(props) => <Chat connection={es} visitor={visitor} {...props} />} />
            <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} />
            <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} />
            <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={visitor} {...props} />} />
            <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} />
            <Route exact path="/:user/:mid" render={(props) => <Thread connection={es} visitor={visitor} {...props} />} />
          </Switch>
        </section>
        {
          visitor.uid > 0 &&
          <aside id="sidebar">
            <Link to="/?show=my">
              <Icon name="ei-clock" size="s" />
              <span className="desktop">My feed</span>
            </Link>
            <Link to="/pm">
              <Icon name="ei-envelope" size="s" />
              <span className="desktop">Messages</span>
            </Link>
            <Link to="/?show=discuss">
              <Icon name="ei-bell" size="s" />
              <span className="desktop">Discussions</span>
            </Link>
            <Link to="/settings" rel="nofollow">
              <Icon name="ei-gear" size="s" />
              <span className="desktop">Settings</span>
            </Link>
          </aside>
        }
      </>
    </Router>
  );
}