import { useState, useRef, useEffect } from "react";

const focusUrlParamName = 'focus'
const focusChangedEventName = "focus-changed"
const focusedElementClassName = 'focused-element'

function triggerElementFocused(elementKey?: string) {
    const url = new URL(window.location.href);
    if (elementKey) {
        url.searchParams.set(focusUrlParamName, elementKey)
    } else {
        url.searchParams.delete(focusUrlParamName)
    }
    const focusChangeEvent = new Event(focusChangedEventName)
    history.pushState({}, "", url);
    window.dispatchEvent(focusChangeEvent)
}

export function useFocusedElement(elementKey: string) {
    const [isFocusedElement, setFocusedElement] = useState(false)
    const focusedClass = isFocusedElement ? focusedElementClassName : ''
    const elementRef = useRef<HTMLSpanElement>(null)

    function focusElement() {
        triggerElementFocused(isFocusedElement ? undefined : elementKey)
    }

    useEffect(() => {
        function getFocusedState() {
            const params = new URLSearchParams(window.location.search)
            const focusedElement = params.get(focusUrlParamName)
            const focused: boolean = focusedElement && focusedElement == elementKey || false
            setFocusedElement(focused)
        }

        getFocusedState()
        addEventListener(focusChangedEventName, getFocusedState)
        return () => {
            removeEventListener(focusChangedEventName, getFocusedState)
        }
    }, [elementKey, setFocusedElement])

    isFocusedElement && elementRef.current?.scrollIntoView()

    return {isFocusedElement, focusedClass, elementRef, focusElement}
}