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

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-async'

/**
 * @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={`https://juick.com/login?retpath=${window.location.href}`} state={{ from: location }} />
  }

  return children
}

/**
 *
 */
export function Discover() {
  const [search] = useSearchParams()
  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 [params] = useSearchParams()
  const search = {
    ...params,
    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({
    msgs: [],
    nextpage: null,
    error: false,
    tag: ''
  })
  const [loading, setLoading] = useState(true)
  const [filter] = useSearchParams()
  useEffect(() => {
    setLoading(true)
    let getPageParam = (pageParam, lastMessage, /** @type { URLSearchParams } */ filterParams) => {
      const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : dayjs.utc(lastMessage.updated).valueOf()
      filterParams.append(pageParam, pageValue)
      return `?${filterParams.toString()}`
    }
    let params = { ...Object.fromEntries(filter), ...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, new URLSearchParams(params))
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
        setState((prevState) => {
          return {
            ...prevState,
            msgs: data,
            nextpage: nextpage,
            tag: filter['tag'] || ''
          }
        })
        setLoading(false)
      }).catch(() => {
        setState((prevState) => {
          return {
            ...prevState,
            error: true
          }
        })
      })
  }, [query, filter])
  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>
  )
}