import { MediaQuery } from 'svelte/reactivity';
const defaultOptions = { allowItemHover: true, position: 'bottom' };
export const useFloatingItem = (trigger, floatingItem, options = defaultOptions) => {
    const normalizedOptions = {
        ...defaultOptions,
        ...options,
    };
    let floatingItemIsDisplayed = $state(false);
    const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);
    function getListboxPosition() {
        const triggerRect = trigger()?.getBoundingClientRect();
        const floatingItemRect = floatingItem()?.getBoundingClientRect();
        if (!triggerRect || !floatingItemRect)
            return {};
        if (isMobile) {
            return {
                top: `-${floatingItemRect.height + 24}px`,
                left: `-${floatingItemRect.width - triggerRect.width}px`,
            };
        }
        return {
            top: options.position === 'top'
                ? `-${floatingItemRect.height - triggerRect.height}px`
                : floatingItem()?.style.left || '0px',
        };
    }
    function hideFloatingItem(event) {
        if (!floatingItem || !trigger)
            return;
        const target = event?.relatedTarget;
        // Prevent floating item from being hidden if mouse goes from trigger to listbox, unless specified
        if (normalizedOptions.allowItemHover &&
            target &&
            (floatingItem()?.contains(target) || trigger()?.contains(target))) {
            return;
        }
        floatingItem()?.classList.add('mc-sidebar__floating-item--hidden');
        floatingItemIsDisplayed = false;
        document.removeEventListener('mousedown', handleClickOutside);
    }
    function handleClickOutside(event) {
        const path = event.composedPath ? event.composedPath() : [];
        if (!path.includes(trigger()) && !path.includes(floatingItem())) {
            hideFloatingItem(event);
        }
    }
    function showFloatingItem() {
        const el = floatingItem();
        el?.classList.toggle('mc-sidebar__floating-item--hidden');
        floatingItemIsDisplayed = !el?.classList.contains('mc-sidebar__floating-item--hidden');
        if (!floatingItemIsDisplayed)
            return;
        if (!el)
            return;
        const { left, top } = getListboxPosition();
        if (top) {
            el.style.top = top;
        }
        if (left) {
            el.style.left = left;
        }
        floatingItemIsDisplayed = true;
        document.addEventListener('mousedown', handleClickOutside);
    }
    function onTriggerKeydown(event) {
        if (!floatingItem)
            return;
        if (['ArrowDown', 'Enter', ' '].includes(event.key)) {
            event.preventDefault();
            showFloatingItem();
            focusFirstListboxItem();
        }
        if (event.key === 'Tab') {
            hideFloatingItem();
        }
    }
    function focusFirstListboxItem() {
        const firstItem = floatingItem()?.querySelector('button, [href], [tabindex]:not([tabindex="-1"])');
        firstItem?.focus();
    }
    function onListboxKeydown(event) {
        if (event.key === 'Escape') {
            event.preventDefault();
            hideFloatingItem();
            trigger()?.focus();
        }
    }
    return {
        floatingItemIsDisplayed,
        hideFloatingItem,
        showFloatingItem,
        onTriggerKeydown,
        onListboxKeydown,
    };
};
