import { useState, useEffect } from 'react';
import { Link, useLocation, useParams, Navigate } from 'react-router-dom';

import qs from 'qs';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);

import Message from './Message';
import Spinner from './Spinner';

import UserInfo from './UserInfo';

import { getMessages } from '../api';
import { useVisitor } from './VisitorContext';
import { Helmet } from 'react-helmet';

/**
 * @typedef {object} Query
 * @property {string} baseUrl
 * @property {object=} search
 * @property {string} pageParam
 */

/**
 * @typedef {object} PageProps
 * @property {string=} search
 * @property {import('../api').Message[]=} msgs
 */

function RequireAuth({ children }) {
  let location = useLocation();
  let [visitor] = useVisitor();
  if (!visitor.hash) {
    // Redirect them to the /login page, but save the current location they were
    // trying to go to when they were redirected. This allows us to send them
    // along to that page after they login, which is a nicer user experience
    // than dropping them off on the home page.
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
}

/**
 *
 */
export function Discover() {
  const location = useLocation();
  let search = qs.parse(location.search.substring(1));
  const query = {
    baseUrl: '/api/messages',
    search: search,
    pageParam: search.search ? 'page' : 'before_mid'
  };
  return (
    <>
      <Helmet>
        <title>Discover</title>
      </Helmet>
      <Feed query={query} />
    </>
  );
}

/**
 *
 */
export function Discussions() {
  const query = {
    baseUrl: '/api/messages/discussions',
    pageParam: 'to'
  };
  return (
    <>
      <Helmet>
        <title>Discussions</title>
      </Helmet>
      <Feed query={query} />
    </>
  );
}

/**
 *
 */
export function Blog() {
  const { user } = useParams();
  const location = useLocation();
  const search = {
    ...qs.parse(location.search.substring(1)),
    uname: user
  };
  const query = {
    baseUrl: '/api/messages',
    search: search,
    pageParam: search.search ? 'page' : 'before_mid'
  };
  const blogTitle = `${user} blog`;
  const pageTitle = search.tag ? `${blogTitle}: #${search.tag}` : blogTitle;
  return (
    <>
      <Helmet>
        <title>{pageTitle}</title>
      </Helmet>
      <div className="msg-cont">
        <UserInfo uname={user} />
      </div>
      <Feed query={query} />
    </>
  );
}

/**
 * 
 */
export function Tag() {
  const params = useParams();
  const { tag } = params;
  const query = {
    baseUrl: '/api/messages',
    search: {
      tag: tag
    },
    pageParam: 'before_mid'
  };
  return (
    <>
      <Helmet>
        <title>#{tag}</title>
      </Helmet>
      <Feed query={query} />
    </>
  );
}

/**
 *
 */
export function Home() {
  const query = {
    baseUrl: '/api/home',
    pageParam: 'before_mid'
  };
  return (
    <RequireAuth>
      <Feed query={query} />
    </RequireAuth>
  );
}

/**
 * @typedef {object} FeedState
 * @property { import('../api').Message[]= } msgs
 * @property { Query} query
 */

/**
 * @param {FeedState} props
 */
function Feed({ query }) {
  const location = useLocation();
  const [visitor] = useVisitor();
  const [state, setState] = useState({
    hash: visitor.hash,
    msgs: [],
    nextpage: null,
    error: false,
    tag: ''
  });
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(true);
    const filter = location.search.substring(1);
    let getPageParam = (pageParam, lastMessage, filterParams) => {
      const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : dayjs.utc(lastMessage.updated).valueOf();
      let newFilter = { ...filterParams };
      newFilter[pageParam] = pageValue;
      return `?${qs.stringify(newFilter)}`;
    };
    const filterParams = qs.parse(filter);
    let params = Object.assign({}, filterParams || {}, query.search || {});
    let url = query.baseUrl;
    getMessages(url, params)
      .then(response => {
        const { data } = response;
        const { pageParam } = query;
        const lastMessage = data.slice(-1)[0] || {};
        const nextpage = getPageParam(pageParam, lastMessage, filterParams);
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        setState((prevState) => {
          return {
            ...prevState,
            msgs: data,
            nextpage: nextpage,
            tag: qs.parse(location.search.substring(1))['tag'] || ''
          };
        });
        setLoading(false);
      }).catch(() => {
        setState((prevState) => {
          return {
            ...prevState,
            error: true
          };
        });
      });
  }, [location.search, query]);
  return (state.msgs.length > 0 ? (
    <div className="msgs">
      {
        state.tag && (
          <p className="page">
            <Link to={{ pathname: `/tag/${state.tag}` }}>
              <span>← All posts with tag&nbsp;</span><b>{state.tag}</b>
            </Link>
          </p>
        )
      }
      {
        state.msgs.map(msg =>
          <Message key={msg.mid} data={msg} visitor={visitor} />)
      }
      {
        state.msgs.length >= 20 && (
          <p className="page">
            <Link to={{ pathname: location.pathname, search: state.nextpage }} rel="prev">Next →</Link>
          </p>
        )
      }
    </div>
  ) : state.error ? <div>error</div> : loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>
  );
}