import { useEffect, useState } from 'react'
import type { BackendArt } from '../../functions/BackendTypes'
import { BackendDebounce, BackendFetch } from '../../functions/Backend'
import { routeBackURI, setTitle } from '../../functions/Route'
import { useScrollRoot } from '../../functions/Context'

import HeaderMessage from '../layout/HeaderMessage'
import HeaderLoading from '../layout/HeaderLoading'
import LayoutBrowser from '../layout/LayoutBrowser'
import FooterLoading from '../layout/FooterLoading'
import FooterError from '../layout/FooterError'
import FooterText from '../layout/FooterText'
import InputBack from '../inputs/Back'

export default function ViewSearch() {
    const scrollRoot = useScrollRoot()
    const [error, setError] = useState<string>()
    const [isFetching, setFetching] = useState(false)
    const [isLoading, setLoading] = useState(false)
    const [isBottom, setBottom] = useState(false)
    const [items, setItems] = useState<BackendArt[]>([])

    const params = new URLSearchParams(window.location.search)
    const query = params.getAll('tag')
    const limit = 30

    async function loadMore() {
        if (query.length === 0) {
            setError('Enter tags to begin search.')
            return
        }

        if (isFetching || isBottom) return
        setFetching(true)
        setLoading(true)
        try {
            const resp = await BackendFetch<BackendArt[]>(
                `/art/search?limit=${limit}&after=${items.at(-1)?.id}` + query.map((q) => `&tag=${q}`).join(''),
            )
            if (!resp.success) {
                const d = BackendDebounce(resp, 1)
                if (!d.ratelimit) {
                    setError(resp.error)
                    setLoading(false)
                }
                await d.sleep
                return
            }

            if (resp.json.length < limit) setBottom(true)
            setItems((prev) => [...prev, ...resp.json])
            setError(undefined)
            setLoading(false)
        } finally {
            setFetching(false)
        }
    }

    useEffect(() => {
        if (!scrollRoot) return
        if (scrollRoot.scrollHeight <= scrollRoot.clientHeight) {
            loadMore()
        }
    }, [items, scrollRoot])

    setTitle(`Search (${query.join(', ')})`)
    return (
        <>
            <HeaderMessage label={`View: Search <Sort: Latest> <TAGS: ${query.length ? query.join(', ') : 'NONE'}>`} />
            {routeBackURI()?.startsWith('/art/') && <InputBack />}
            <LayoutBrowser position={0} items={items} onEndReached={loadMore} />

            {error && <FooterError reason={error} />}
            {isBottom && <FooterText label="- No More Results -" />}
            {isLoading && (items.length ? <FooterLoading reason={undefined} /> : <HeaderLoading reason={undefined} />)}
        </>
    )
}