document.addEventListener('DOMContentLoaded', function () {
    const districtSelect =
        document.getElementById('district_id');

    const municipalitySelect =
        document.getElementById('municipality_id');

    const form =
        document.getElementById(
            'delegateRegistrationForm'
        );

    const submitButton =
        document.getElementById(
            'registrationSubmitButton'
        );

    if (districtSelect && municipalitySelect) {
        districtSelect.addEventListener(
            'change',
            async function () {
                const districtId =
                    districtSelect.value;

                municipalitySelect.innerHTML =
                    '<option value="">Loading municipalities...</option>';

                municipalitySelect.disabled = true;

                if (!districtId) {
                    municipalitySelect.innerHTML =
                        '<option value="">Select municipality</option>';

                    municipalitySelect.disabled =
                        false;

                    return;
                }

                const template =
                    districtSelect.dataset
                        .municipalityUrl;

                const url = template.replace(
                    '{districtId}',
                    encodeURIComponent(
                        districtId
                    )
                );

                try {
                    const response = await fetch(
                        url,
                        {
                            headers: {
                                Accept:
                                    'application/json'
                            }
                        }
                    );

                    if (!response.ok) {
                        throw new Error(
                            'Municipalities could not be loaded.'
                        );
                    }

                    const municipalities =
                        await response.json();

                    municipalitySelect.innerHTML =
                        '<option value="">Select municipality</option>';

                    municipalities.forEach(
                        function (municipality) {
                            const option =
                                document.createElement(
                                    'option'
                                );

                            option.value =
                                municipality.id;

                            option.textContent =
                                municipality.name;

                            municipalitySelect
                                .appendChild(option);
                        }
                    );
                } catch (error) {
                    municipalitySelect.innerHTML =
                        '<option value="">Unable to load municipalities</option>';

                    console.error(error);
                } finally {
                    municipalitySelect.disabled =
                        false;
                }
            }
        );
    }

    if (form && submitButton) {
        form.addEventListener(
            'submit',
            function () {
                if (!form.checkValidity()) {
                    return;
                }

                submitButton.disabled = true;

                const label =
                    submitButton.querySelector(
                        'span'
                    );

                if (label) {
                    label.textContent =
                        'Submitting Registration...';
                }
            }
        );
    }
});