import { useEffect } from 'react';
/**
 * Usage: Focuses on the element based on the given condition
 * @example useElementFocus(headerRef, {shouldFocus: !loading, delay: 300, triggerKey: 'space', scrollIntoView: true, dependencies: [loading, taskId], setTabIndex: true})
 * @param elementRef ref of the element to focus
 * @param shouldFocus boolean value to specify if the element should be focused or not
 * @param delay focus on the given ref after some delay in milliseconds.
 * @param triggerKey focus on the ref element if this key is pressed
 * @param dependencies re-trigger evaluation based on external dependencies.
 * @param setTabIndex If true, applies tabIndex -1 to make non-interactive elements (e.g., div, headers) focusable.
 * Only needed for elements that are not naturally focusable. Do no use it for elements like inputs, buttons, anchors etc.
 */
const isNaturallyFocusable = (el) => {
    const tagName = el.tagName.toLowerCase();
    const isInteractive = ['button', 'input', 'textarea', 'select'].includes(tagName);
    const isAnchorWithHref = tagName === 'a' && el.href;
    return isInteractive || isAnchorWithHref || el.hasAttribute('tabindex') || el.tabIndex >= 0;
};
const useElementFocus = (elementOrRef, { shouldFocus = true, delay = 0, triggerKey, scrollIntoView = false, dependencies = [], setTabIndex = false } = {}) => {
    const getElement = () => elementOrRef && typeof elementOrRef === 'object' && 'current' in elementOrRef
        ? elementOrRef.current
        : elementOrRef;
    const triggerFocus = () => {
        const el = getElement();
        if (el) {
            if (setTabIndex && !isNaturallyFocusable(el)) {
                el.setAttribute('tabindex', '-1');
            }
            el.focus();
            if (scrollIntoView) {
                /** undefined lets browser implement default behavior */
                el.scrollIntoView(typeof scrollIntoView === 'object' ? scrollIntoView : undefined);
            }
        }
    };
    // Focus on mount/update based on dependencies
    useEffect(() => {
        const el = getElement();
        if (!shouldFocus || !el || triggerKey)
            return;
        if (delay > 0) {
            const timer = setTimeout(triggerFocus, delay);
            return () => clearTimeout(timer);
        }
        triggerFocus();
    }, [shouldFocus, elementOrRef, triggerKey, delay, scrollIntoView, ...dependencies]);
    // Focus on key press if triggerKey is provided
    useEffect(() => {
        const el = getElement();
        if (!shouldFocus || !el || !triggerKey)
            return;
        const handler = (e) => {
            if (e.key === triggerKey) {
                if (delay > 0) {
                    setTimeout(triggerFocus, delay);
                }
                else {
                    triggerFocus();
                }
            }
        };
        window.addEventListener('keydown', handler);
        return () => window.removeEventListener('keydown', handler);
    }, [shouldFocus, elementOrRef, triggerKey, delay, scrollIntoView, ...dependencies]);
};
export default useElementFocus;
//# sourceMappingURL=useElementFocus.js.map