import each from '../../../modules/util/each';

export function toggleHidden(control, target) {
    // reverse hidden on dropdown and control
    target.hidden = !target.hidden;
    control.setAttribute('aria-expanded', !target.hidden);
}

export default function dropdownBehavior(control) {
    const dropdown = document.getElementById(control.getAttribute('aria-controls'));
    const links = dropdown.querySelectorAll('a, button');

    //initial attribute setup
    control.setAttribute('aria-expanded', !dropdown.hidden);

    //control behavior
    control.addEventListener('click', event => {
        // Clicks and enter open/close dropdown
        event.preventDefault();
        toggleHidden(control, dropdown);
    });
    control.addEventListener('keydown', event => {
        // Space will open and close dropdown, escape will close the dropdown if the menu is not hidden
        if (event.keyCode === 32 || (event.keyCode === 27 && !dropdown.hidden)) {
            event.preventDefault();
            toggleHidden(control, dropdown);
        }
    });

    //if dropdown is open, losing focus of control and not entering dropdown will close it.
    control.addEventListener('focusout', event => {
        if (event.relatedTarget && !dropdown.hidden) {
            let isInThisDropdown = false;
            each(links, link => {
                if (event.relatedTarget === link) isInThisDropdown = true;
            });
            if (event.relatedTarget === control) isInThisDropdown = true;
            if (!isInThisDropdown) toggleHidden(control, dropdown);
        } else if (!event.relatedTarget && !dropdown.hidden) {
            toggleHidden(control, dropdown);
        }
    });

    each(links, link => {
        link.addEventListener('keydown', event => {
            // Escape inside the dropdown will close the dropdown and focus the control
            if (event.keyCode === 27) {
                //we prevent default, so we don't exit maximized screens on safari
                event.preventDefault();
                toggleHidden(control, dropdown);
                control.focus();
            }
        });

        link.addEventListener('focusout', event => {
            if (event.relatedTarget) {
                let isInThisDropdown = false;
                each(links, link => {
                    if (event.relatedTarget === link) isInThisDropdown = true;
                });
                if (event.relatedTarget === control) isInThisDropdown = true;
                if (!isInThisDropdown) toggleHidden(control, dropdown);
            } else if (!event.relatedTarget && !dropdown.hidden) {
                toggleHidden(control, dropdown);
            }
        });
    });
}