const dwellTimeout = 400;
const persistTimeout = 150;

export const useTooltip = () => {
    const activeElement = useState<HTMLElement | null>('tooltip:activeElement', () => null);
    const activeHotkey = useState<string[] | null>('tooltip:activeHotkey', () => null);
    const isVisible = useState<boolean>('tooltip:isVisible', () => false);
    const dwellTimeoutId = useState<NodeJS.Timeout | null>('tooltip:dwellTimeoutId', () => null);
    const closeTimeoutId = useState<NodeJS.Timeout | null>('tooltip:closeTimeout', () => null);

    const show = (el: HTMLElement, hotkey?: string[]) => {
        if (closeTimeoutId.value) {
            clearTimeout(closeTimeoutId.value);
        }

        if (isVisible.value) {
            activeElement.value = el;
            activeHotkey.value = hotkey || null;
        } else {
            dwellTimeoutId.value = setTimeout(() => {
                activeElement.value = el;
                activeHotkey.value = hotkey || null;
                isVisible.value = true;
            }, dwellTimeout);
        }
    };

    const hide = () => {
        if (dwellTimeoutId.value) {
            clearTimeout(dwellTimeoutId.value);
        }

        if (closeTimeoutId.value) {
            clearTimeout(closeTimeoutId.value);
        }

        closeTimeoutId.value = setTimeout(() => {
            isVisible.value = false;
            activeElement.value = null;
            closeTimeoutId.value = null;
        }, persistTimeout);
    };

    return {
        activeElement: readonly(activeElement),
        activeHotkey: readonly(activeHotkey),
        isVisible: readonly(isVisible),
        show,
        hide,
    };
};