import { useState, useEffect, useRef, Fragment } from 'react';
import { Route, Link, Routes } from 'react-router-dom';
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 { useCookies } from 'react-cookie';

import { me, trends } from './api';
import { useVisitor } from './ui/VisitorContext';

/**
 * 
 * @param {import('react').PropsWithChildren<{}> & {
 * footer: string
 * }} props props
 */
export default function App({ footer }) {

  let contentRef = useRef(null);
  const [cookie, setCookie] = useCookies(['hash']);

  const [allTrends, setAllTrends] = useState([]);

  const [visitor, setVisitor] = useVisitor();

  useEffect(() => {
    svg4everybody();
    let params = qs.parse(window.location.search.substring(1));
    if (params.hash) {
      setCookie('hash', params.hash, { path: '/' });
      let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
      window.history.replaceState({}, document.title, retpath);
    }
  }, [setCookie, footer]);

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

  const [hash, setHash] = useState(cookie.hash);

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

  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]);

  useEffect(() => {
    const getTrends = async () => { 
      setAllTrends(await trends()); 
    };
    getTrends();
  }, []);

  /**
   * @param {import("./api").SecureUser} visitor
   */
  let auth = (visitor) => {
    setVisitor(prevState => {
      if (visitor.hash != prevState.hash) {
        setHash(visitor.hash);
      }
      return visitor;
    });
  };
  return (
    <>
      <Header />
      <div id="content_wrapper">
        {
          <aside id="sidebar">
            <div id="sidebar_wrapper">
              {visitor.uid > 0 && (<>
                <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>
              </>)}
              <div className="tags desktop">
                <h4>Trends</h4>
                { allTrends.map((it, index) => (
                    <Fragment key={it.tag}>
                        {index > 0 && ' '}
                        <Link to={`/tag/${it.tag}`}>#{it.tag}</Link>
                    </Fragment>
                )) }
              </div>
              <div id="footer" className="desktop">
                <div id="footer-left">juick.com &copy; 2008-2022
                  {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div>
                <div id="footer-right">
                  &nbsp;&middot;&nbsp;<Link href="/help/contacts" rel="nofollow">Contacts</Link>
                  &nbsp;&middot;&nbsp;<Link href="/help/tos" rel="nofollow">TOS</Link>
                </div>
              </div>
            </div>
          </aside>
        }
        <section id="content" ref={contentRef}>
          <Routes>
            <Route exact path="/" element={<Discussions />} />
            <Route exact path="/home" element={<Home />} />
            <Route exact path="/discover" element={<Discover />} />
            <Route exact path="/settings" element={<Settings onChange={auth} />} />
            <Route exact path="/login" element={<Login onAuth={auth} />} />
            <Route exact path="/post" element={<Post />} />
            <Route exact path="/pm" element={<Contacts />} />
            <Route exact path="/pm/:user" element={<Chat connection={eventSource} />} />
            <Route exact path="/:user/friends" element={<Friends />} />
            <Route exact path="/:user/readers" element={<Readers />} />
            <Route exact path="/:user" element={<Blog />} />
            <Route exact path="/tag/:tag" element={<Tag />} />
            <Route exact path="/:user/:mid" element={<Thread connection={eventSource} />} />
          </Routes>
        </section>
      </div>
    </>
  );
}