import {onClickOutside} from "./../helpers/clickOutside.js";

export function dropdown() {
    document.querySelectorAll(".dropdown").forEach(el => {
        dropdownInit(el);
    })
}

function dropdownInit(el) {
    const button = el.querySelector("button");
    const menu = el.querySelector(".dropdown-menu");
    button.addEventListener('click', function () {
        if (menu.hasAttribute('hidden')) {
            this.setAttribute('aria-expanded', 'true');
            menu.removeAttribute('hidden');

            // Set focus on first link
            // will be highlighted for keyboard users
            menu.querySelector(".dropdown-item:first-child")?.focus();
        } else {
            menu.setAttribute('hidden', 'true');
            this.setAttribute('aria-expanded', 'false');
        }
    });

    document.addEventListener('keydown', (event) => {
        // Ignore IME composition
        if (event.isComposing || event.key === "esc") {
            return;
        }

        // Close menu with ESC key
        if (event.keyCode === 27) {
            if (!menu.hasAttribute('hidden')) {
                menu.setAttribute('aria-expanded', 'false');
                menu.setAttribute('hidden', 'true');
            }
        }
    });

    onClickOutside(menu, ".dropdown", () => menu.hidden = true);


}