import { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'

import { SetState } from '../utils/types'

function useStoryIndex(annLength: number | undefined) {
    const [index, setIndex] = useState(0)

    const [searchParams, setSearchParams] = useSearchParams()

    const withReset =
        <T>(f: SetState<T>) =>
        (...args: Parameters<SetState<T>>) => {
            setIndex(0)
            setSearchParams(
                (prev) => ({
                    ...Object.fromEntries(prev),
                    storyIndex: '0',
                }),
                { replace: true }
            )
            f(...args)
        }

    useEffect(() => {
        setIndex(
            annLength
                ? Number.parseInt(searchParams.get('storyIndex') || '0')
                : 0
        )
        // searchParams have actual query string at first render
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [annLength])

    const increment = () =>
        setIndex((prev) => {
            const newIndex = (prev + 1) % (annLength || 1)
            setSearchParams(
                (prev) => ({
                    ...Object.fromEntries(prev),
                    storyIndex: newIndex.toString(),
                }),
                { replace: true }
            )

            return newIndex
        })

    const decrement = () =>
        setIndex((prev) => {
            const newIndex = prev > 0 ? prev - 1 : 0
            setSearchParams(
                (prev) => ({
                    ...Object.fromEntries(prev),
                    storyIndex: newIndex.toString(),
                }),
                { replace: true }
            )

            return newIndex
        })

    const set = (n: number) =>
        setIndex(() => {
            const newIndex = n % (annLength || 1)
            setSearchParams(
                (prev) => ({
                    ...Object.fromEntries(prev),
                    storyIndex: newIndex.toString(),
                }),
                { replace: true }
            )

            return newIndex
        })

    return {
        n: index,
        withReset,
        increment,
        decrement,
        set,
    }
}

export default useStoryIndex