import { useCallback } from "react";
import { rovingFocus } from "../../../utils/helpers/roving-focus.js";
import { useTabsContext } from "../../Tabs.context.js";
const TAB_SELECTOR = "[data-aksel-tab]:not([data-disabled])";
/**
 * TabList hook to manage multiple tab buttons,
 * and ensures only one tab is selected at a time.
 */
export function useTabList() {
    const { loop, selectedValue, setFocusedValue } = useTabsContext();
    /**
     * Implements roving-tabindex for horizontal tabs.
     */
    const onKeyDown = useCallback((event) => {
        const container = event.currentTarget;
        const current = event.target.closest(TAB_SELECTOR);
        const keyMap = {
            ArrowLeft: () => rovingFocus(TAB_SELECTOR, container, "prev", current, loop),
            ArrowRight: () => rovingFocus(TAB_SELECTOR, container, "next", current, loop),
            Home: () => rovingFocus(TAB_SELECTOR, container, "first"),
            End: () => rovingFocus(TAB_SELECTOR, container, "last"),
        };
        const hasModifiers = event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
        const action = keyMap[event.key];
        if (action && !hasModifiers) {
            event.preventDefault();
            action();
        }
        else if (event.key === "Tab") {
            /**
             * Imperative focus during keydown is risky so we prevent React's batching updates
             * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
             */
            selectedValue && setTimeout(() => setFocusedValue(selectedValue));
        }
    }, [loop, selectedValue, setFocusedValue]);
    return { onKeyDown };
}
//# sourceMappingURL=useTabList.js.map