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

import svg4everybody from 'svg4everybody';

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 Header from './ui/Header';
import Post from './ui/Post';
import Thread from './ui/Thread';
import Login from './ui/Login';

import cookie from 'react-cookies';

import { me } from './api';

const elClassHidden = 'header--hidden';

const elClassTop = 'content--top';

export default function App() {

  let contentRef = useRef(null);

  useEffect(() => {
    svg4everybody();
    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);
    }
  }, []);

  /**
   * @type {import('./api').SecureUser}
   */
  const unknownUser = {
    uid: -1
  };

  const [visitor, setVisitor] = useState(unknownUser);

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

  const [scrollState, setScrollState] = useRafState({
    hidden: false,
    top: false,
    prevScroll: 0
  });

  let { x, y } = useScroll(contentRef);

  useEffect(() => {
    let dHeight = contentRef.current.scrollHeight;
    let wHeight = contentRef.current.clientHeight;
    setScrollState((scrollState) => {
      let wScrollDiff = scrollState.prevScroll - y;
      let hidden = scrollState.hidden;
      let top = scrollState.top;
      if (y <= 0) {
        // scrolled to the very top; element sticks to the top
        hidden = false;
        top = true;
      } else if ((wScrollDiff > 0) && hidden) {
        // scrolled up; element slides in
        hidden = false;
        top = false;
      } else if (wScrollDiff < 0) {
        // scrolled down
        if ((y + wHeight) >= dHeight && hidden) {
          // scrolled to the very bottom; element slides in
          hidden = false;
          top = false;
        } else {
          // scrolled down; element slides out
          hidden = true;
          top = false;
        }
      }
      return {
        hidden: hidden,
        top: top,
        prevScroll: y
      };
    });
  }, [x, y, setScrollState]);
  const [hash, setHash] = useState(cookie.load('hash'));

  const [eventSource, setEventSource] = /** @param EventSource? */ useState(null);

  useEffect(() => {
    let es;
    const anonymousUser = {
      uid: 0
    };
    if (hash) {
      me().then(visitor => auth(visitor))
        .catch(() => setVisitor(anonymousUser));
      if ('EventSource' in window) {
        const eventParams = { hash: hash };
        let url = new URL(`https://juick.com/api/events?${qs.stringify(eventParams)}`);
        es = new EventSource(url.toString());
        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);
      }
    } else {
      setVisitor(anonymousUser);
    }
    return (() => {
      if (es && es.removeEventListener) {
        es.removeEventListener('read', updateStatus);
        es.removeEventListener('msg', updateStatus);
      }
    });
  }, [hash]);

  /**
   * @param {import("./api").SecureUser} visitor
   */
  let auth = (visitor) => {
    setVisitor(prevState => {
      if (visitor.hash != prevState.hash) {
        setHash(visitor.hash);
      }
      return visitor;
    });
  };
  return (
    <Router>
      <>
        <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} />
        <div id="wrapper">
          <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
            <Switch>
              <Route exact path="/">
                <Discussions visitor={visitor} />
              </Route>
              <Route exact path="/home">
                <Home visitor={visitor} />
              </Route>
              <Route exact path="/discover">
                <Discover visitor={visitor} />
              </Route>
              <Route exact path="/settings">
                <Settings visitor={visitor} onChange={auth} />
              </Route>
              <Route exact path="/login">
                <Login visitor={visitor} onAuth={auth} />
              </Route>
              <Route exact path="/post">
                <Post visitor={visitor} />
              </Route>
              <Route exact path="/pm">
                <Contacts visitor={visitor} />
              </Route>
              <Route exact path="/pm/:user">
                <Chat connection={eventSource} visitor={visitor} />
              </Route>
              <Route exact path="/:user/friends">
                <Friends />
              </Route>
              <Route exact path="/:user/readers">
                <Readers />
              </Route>
              <Route exact path="/:user">
                <Blog visitor={visitor} />
              </Route>
              <Route exact path="/tag/:tag">
                <Tag visitor={visitor} />
              </Route>
              <Route exact path="/:user/:mid">
                <Thread connection={eventSource} visitor={visitor} />
              </Route>
            </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>
          }
        </div>
      </>
    </Router>
  );
}