const dialogContainerId = "#dialog-container"

window.addEventListener('load', () => {
    document.querySelectorAll(".dropdown").forEach(el => {
        const action = el.querySelector(".dropdown-action");
        const content = el.querySelector(".dropdown-content");

        action.addEventListener('click', () => {
            content.classList.toggle('selected');
            content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
        })
    })

    // configure radio button groups
    document.querySelectorAll("section.radio-group").forEach(el => {
        const submittedInput = el.querySelector("input[type=hidden]");
        el.querySelector(`input[value="${submittedInput.value}"]`).checked = true;
        
        
        el.querySelectorAll("input[type=radio]").forEach(rb => {
            if(rb?.checked) {
                submittedInput.value = rb.value;
            }
            rb.addEventListener('click', () => {
                submittedInput.value = rb.value;
            })
        })
    })
    // configure dialog buttons
    document.querySelectorAll("button[data-type=dialog]").forEach(btn => {
        const selector = btn.dataset.trigger;
        btn.addEventListener('click', async () => {
            let response = await fetch(btn.dataset.url);
            if(response.ok) {
                response = await response.text();
                let container = document.querySelector(dialogContainerId);
                if(container == null) {
                    const node = document.createElement('div');
                    node.id = "dialog-container";
                    document.querySelector("body").appendChild(node);
                    container = document.querySelector(dialogContainerId);
                }
                container.innerHTML = response;
                const dialogReference = document.querySelector(selector);
                dialogReference?.showModal();
            } else {
                // todo display alert
                console.log("no dialog found");
            }
        });
    });
    // configure section selector
    document.querySelectorAll("select[data-type=section-selector]").forEach(select => {
        const sectionPrefix = select.dataset.selectorPrefix;
        const options = [...select.options].map(o => o.value);

        for(let option of options) {
            const querySelector = "div[data-section-id=" + sectionPrefix + "-" + option + "]";
            const section = document.querySelector(querySelector);
            if(option === select.value) {
                section?.classList?.remove('hide');    
            } else {
                section?.classList?.add('hide');        
            }
        }

        select.addEventListener("change", () => {
            for(let option of options) {
                const querySelector = "div[data-section-id=" + sectionPrefix + "-" + option + "]";
                const section = document.querySelector(querySelector);
                if(option === select.value) {
                    section?.classList?.remove('hide');    
                } else {
                    section?.classList?.add('hide');        
                }
            }
        })
    })
})

function closeDialog(selector) {
    document.querySelector(selector).close();
    document.querySelector(dialogContainerId).innerHTML="";
}