{% import '_includes/forms' as forms %}

{{ forms.radioGroupField({
    label: 'settings.datatype-label'|t('locale-selector'),
    instructions: 'settings.datatype-instructions'|t('locale-selector'),
    id: 'datatype',
    name: 'datatype',
    value: currentDatatype,
    options: availableDatatypes
}) }}

{{ forms.checkboxSelectField({
    label: 'settings.allowed-sites-label'|t('locale-selector'),
    instructions: 'settings.allowed-sites-instructions'|t('locale-selector'),
    id: 'data-list-1',
    name: 'whitelistedSites',
    values: whitelistedSites,
    options: availableSites,
    showAllOption: true,
}) }}

{{ forms.checkboxGroupField({
    label: 'settings.allowed-countries-label'|t('locale-selector'),
    instructions: 'settings.allowed-countries-instructions'|t('locale-selector'),
    id: 'data-list-2',
    name: 'whitelistedCountries',
    values: whitelistedCountries,
    options: availableCountries
}) }}

{% js %}
    //Fetch the radiobox for choosing the datatype
    const datatypeRadios = document.querySelectorAll('input[type="radio"][name$="[datatype]"]');

    //Add a listener for each radiobox to handle their change
    Array.from(datatypeRadios).forEach(datatypeRadio => {
        datatypeRadio.addEventListener('change', function(event) {
            changeListDisplayed(this.value);
        });
    });

    /**
     * Change the data list displayed
     * @param numList
     */
    function changeListDisplayed(numList = 1) {
        // Hide all lists
        Array.from(document.querySelectorAll('fieldset[id^="{{ 'data-list'|namespaceInputId }}"]')).forEach(listField => {
            listField.style.display = 'none';
        });

        // Show only the chosen list
        document.getElementById(`{{ 'data-list'|namespaceInputId }}-${numList}-field`).style.display = 'block';
    }


    //Change the display of lists according to the current datatype
    changeListDisplayed({{ currentDatatype }});

    // Add Select all / Unselect all buttons for countries
    const countryFieldInstructions = document.getElementById('{{ 'data-list-2-instructions'|namespaceInputId }}');
    const checkboxesContainer = countryFieldInstructions.parentElement.querySelector('.input');

    const selectAllButton = document.createElement('button');
    selectAllButton.type = 'button';
    selectAllButton.className = 'link';
    selectAllButton.appendChild(document.createTextNode('Select all'));
    selectAllButton.addEventListener('click', function() {
        checkboxesContainer.querySelectorAll('input[type=checkbox]').forEach(node => {
          node.checked = true;
        });
    });

    const deselectAllButton = document.createElement('button');
    deselectAllButton.type = 'button';
    deselectAllButton.className = 'link';
    deselectAllButton.appendChild(document.createTextNode('Deselect all'));
    deselectAllButton.addEventListener('click', function() {
        checkboxesContainer.querySelectorAll('input[type=checkbox]').forEach(node => {
          node.checked = false;
        });
    });

    checkboxesContainer.parentElement.insertBefore(selectAllButton, checkboxesContainer);
    checkboxesContainer.parentElement.insertBefore(document.createTextNode(' / '), checkboxesContainer);
    checkboxesContainer.
    parentElement.insertBefore(deselectAllButton, checkboxesContainer);
{% endjs %}

{% css %}
    .link {
    color: var(--notice-color);
    margin: 5px 0;
    }

    .link:hover {
    text-decoration: underline
    }
{% endcss %}