const selectOption = function (dropdownTarget, option, userTriggered = false) {
    const oldValue = dropdownTarget.dataset.value || null;
    const ul = dropdownTarget.querySelector('ul');
    dropdownTarget.dataset.value = option.dataset.value || '';
    option.dataset.selected = '';
    option.classList.add('selected');
    const marker = option.querySelector('[data-type="marker"]');
    for (let otherOption of ul.children) {
        if (otherOption !== option) {
            otherOption.removeAttribute('data-selected');
            otherOption.classList.remove('selected');
            for (let c of otherOption.children) {
                if (c.dataset.type === 'marker' && c !== marker) {
                    c.classList.add('hidden');
                };
            };
        };
    };
    marker.classList.remove('hidden');
    dropdownTarget.dataset.value = option.dataset.value || '';
    if (userTriggered) {
        if (dropdownTarget.dataset.dceowoos === undefined || oldValue !== dropdownTarget.dataset.value) { // dceowoos = dispatch change event only when other option was selected
            dropdownTarget.dispatchEvent(selectEvent);
        };
    };
};

const getOptionMarker = function (dropdown, option) {
    return getOptionElement(dropdown, option).querySelector('[data-type="marker"]');
};

const getOptionElement = function (dropdown, option) {
    return dropdown.querySelector('ul').querySelector(`[data-value="${option}"]`);
};

const selectEvent = new CustomEvent('change', {
    bubbles: true
});

document.addEventListener('DOMContentLoaded', function () {
    const dropdowns = document.querySelectorAll('[data-trigger="dropdown"]')
    for (let i = 0; i < dropdowns.length; i++) {
        const dropdownTarget = document.querySelector(dropdowns[i].dataset.triggerTarget);
        dropdowns[i].onclick = function () {
            const ul = dropdownTarget.querySelector('ul');
            for (let option of ul.children) {
                option.onclick = function (event) {
                    selectOption(dropdownTarget, event.currentTarget, true);
                };
            };
            dropdownTarget.classList.remove('initial');
            dropdownTarget.querySelector('[data-type="title"]').innerHTML = dropdownTarget.dataset.dropdownTitle || '';
            if (!(dropdowns[i].dataset.expanded === 'true')) {
                dropdownTarget.classList.add('colapsed');
                dropdownTarget.classList.remove('colapsed');
                dropdownTarget.classList.add('expanded');
                dropdowns[i].dataset.expanded = 'true';
                setTimeout(function () {
                    window.onclick = function (event) {
                        if ((!dropdownTarget.contains(event.target) && event.target !== dropdowns[i])) {
                            for (let option of ul.children) {
                                option.onclick = null;
                            };
                            dropdownTarget.classList.add('colapsed');
                            dropdownTarget.classList.remove('expanded');
                            dropdowns[i].dataset.expanded = 'false';
                            window.onclick = undefined;
                        };
                    };
                }, 100);
            };
        };
        const ul = dropdownTarget.querySelector('ul');
        for (let option of ul.children) {
            option.onclick = function (event) {
                selectOption(dropdownTarget, event.currentTarget, true);
            };
        };
        if (dropdownTarget.children.length) {
            let selectedOption;
            for (let option of ul.children) {
                if (option.dataset.selected !== undefined) {
                    selectedOption = option;
                };
            };
            for (let option of ul.children) {
                if (option.dataset.value === dropdownTarget.dataset.value) {
                    selectedOption = option;
                };
            };
            if (selectedOption) {
                selectOption(dropdownTarget, selectedOption, false);
            };
        };
    };
});

export { selectOption, getOptionElement, getOptionMarker };