const dialogContainerId = "#dialog-container"

window.addEventListener('load', () => {
    // 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();
                const 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="";
}