// The :focus pseudo-selector is not inherited, but sometimes its nice to know when a child
// has focus so the parent can also appear activated.
// This component fills that gap by adding and removing a css class (.has-focus by default)
// when the element itself or any child changes focus
define(['jquery'], function ($, toastr) {
    const tracksFocus = {};
    const focusedElements = [];
    const defaultCssClass = 'has-focus';

    function updateFocusedClass(method) {
        focusedElements.forEach((element) => {
            const $element = $(element);
            const cssClass = $element.attr('data-tracks-focus') || defaultCssClass;
            $element[method](cssClass);
        });
    };

    function updateFocusedFromEvent(event) {
        updateFocusedClass('removeClass');
        const element = event.currentTarget;
        const index = focusedElements.indexOf(element);
        if (event.type === 'focusin') {
            if (index === -1) {
                focusedElements.push(element);
            }
        } else if (event.type === 'focusout') {
            if (index >= 0) {
                focusedElements.splice(index, 1);
            }
        }
        updateFocusedClass('addClass');
    };

    const body = $('body');
    // NOTE: focusin and focusout bubble, focus and blur do not
    body.on('focusin focusout', '[data-tracks-focus]', updateFocusedFromEvent);

    return tracksFocus;
});