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

import Icon from './ui/Icon';
import { Discover, Discussions, Blog, Tag, Home } from './ui/Feeds';
import { Friends, Readers } from './ui/Users';
import Settings from './ui/Settings';
import Contacts from './ui/Contacts';
import Chat from './ui/Chat';
import Post from './ui/Post';
import Thread from './ui/Thread';
import Login from './ui/Login';
import { UserLink } from './ui/UserInfo';
import SearchBox from './ui/SearchBox';

import cookie from 'react-cookies';

import { me } from './api';

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

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

  const [hash, setHash] = useState(cookie.load('hash'));
  const [eventSource, setEventSource] = useState({});

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

  /**
   * @param {{ pathname: any; search: string; }[]} history
   * @param {any} pathname
   * @param {any} searchString
   */
  let search = (history, pathname, searchString) => {
    let location = {};
    location.pathname = pathname;
    location.search = `?search=${searchString}`;
    history.push(location);
  };
  /**
   * @param {import("./api").SecureUser} visitor
   */
  let auth = (visitor) => {
    setVisitor(prevState => {
      if (visitor.hash != prevState.hash) {
        setHash(visitor.hash);
      }
      return visitor;
    });
  };
  return (
    <Router>
      <>
        <div id="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} />
            </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>
                :
                <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
                  <Icon name="ei-user" size="s" />
                  <span className="desktop">Login</span>
                </Link>
              }
            </nav>
          </div>
        </div>
        <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="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={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={eventSource} visitor={visitor} {...props} />} />
            <Route exact path="/:user/friends" render={(props) => <Friends visitor={visitor} {...props} />} />
            <Route exact path="/:user/readers" render={(props) => <Readers visitor={visitor} {...props} />} />
            <Route exact path="/:user" render={(props) => <Blog visitor={visitor} {...props} />} />
            <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} />
            <Route exact path="/:user/:mid" render={(props) => <Thread connection={eventSource} 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>
  );
}