{% load i18n insight_tags %}

<!-- Filter -->
<div class="flex flex-col gap-6">
    <form id="filter-form" class="w-full" aria-label="{% trans 'Query Builder' %}">
        <p class="pb-2 text-insight-body">{% trans "The following conditions must be met:" %}</p>
        {# Live region for screen reader announcements #}
        <span id="filter-announcer" class="sr-only" aria-live="polite" aria-atomic="true"></span>
        <div id="filters" class="flex flex-col gap-2">
            {% for filter in custom_filters %}
                <div class="flex flex-col gap-2 filter">
                    {% include "insight_ui/components/search_query_builder/sq_builder_filter.html" with index=forloop.counter0 selected_field=filter.field filter_operator=filter.operator filter_value=filter.value selected_logic=filter.logic %}
                </div>
            {% empty %}
                <div class="flex flex-col gap-2 filter">
                    {% include "insight_ui/components/search_query_builder/sq_builder_filter.html" with index=0 %}
                </div>
            {% endfor %}
        </div>
        <div class="flex gap-1 mt-6">
            {% button tag_id="add-filter-btn" label=_("Add another filter") on_click="addFilter()" type="primary" outline=True icon_name="plus" icon_only=True %}
            {% button label=_("Apply") type="primary" icon_name="arrow-path" icon_size="s" icon_end=True %}
        </div>
    </form>
</div>
<script>
    // AJAX request to load the permitted operators and related values from the backend
    function updateOperators(fieldSelect, clearInput = true) {
        // Get related operator selection and input field
        const operatorSelect = fieldSelect.closest('.filter').querySelector('.operator-select');
        const valueField = fieldSelect.closest('.filter').querySelector('.value-field');

        // Clear input
        if (clearInput)	valueField.value = "";

        const field = fieldSelect.value;
        const operatorValue = operatorSelect.value;
        if (field)
        {
            // Make request to retrieve the field specific operators
            fetch(`{% url "get_allowed_operators" %}?field=${field}&ov_list={{ ov_list }}`)
                .then(response => response.json())
                .then(data => {
                    operatorSelect.innerHTML = "";
                    // Load available operators
                    for (const [key, value] of Object.entries(data.operators)) {
                        const option = document.createElement('option');
                        option.value = key;
                        option.textContent = value;
                        if (option.value == operatorValue)
                            option.selected = true;
                        operatorSelect.appendChild(option);
                    };

                    if (Object.keys(data.values).length != 0)
                    {
                        // Hide operator selection, if specific values are given
                        operatorSelect.parentNode.classList.add("hidden");

                        // Replace the text-input field with a select dropdown
                        newSelect = document.createElement('select');
                        newSelect.id ="value";
                        newSelect.name = "value";
                        newSelect.value = valueField.value;
                        newSelect.classList.add("value-field", "block", "w-full", "h-9", "input");
                        // Load available values
                        for (const [key, value] of Object.entries(data.values)) {
                            const option = document.createElement('option');
                            option.value = key;
                            option.textContent = value;
                            if (option.value == valueField.value)
                                option.selected = true;
                            newSelect.appendChild(option);
                        }
                        valueField.parentNode.replaceChild(newSelect, valueField);
                    }
                    else
                    {
                        // Show operator select if no specific values are given
                        operatorSelect.parentNode.classList.remove("hidden");

                        // Replace the select dropdown with a text-input field
                        newInput = document.createElement('input');
                        newInput.id = "value";
                        newInput.name = "value";
                        newInput.type = data.inputType;
                        if (newInput.type == "date")
                        {
                            newInput.max= "9999-12-31";  // No years with more than 4 digits please
                            newInput.required = true;
                        }
                        newInput.value = valueField.value;
                        newInput.placeholder = "{% trans 'Value' %}";
                        newInput.classList.add("value-field", "block", "w-full", "h-9", "input");
                        valueField.parentNode.replaceChild(newInput, valueField);
                    }
                });
        }
        else {
            operatorSelect.innerHTML = "";
            valueField.required = false;
        }

        // Add placeholder for the operator selection
        const placeholderOption = document.createElement('option');
        placeholderOption.value = "";
        placeholderOption.textContent = "-- Operation --";
        placeholderOption.disabled = true;
        placeholderOption.selected = true;
        placeholderOption.hidden = true;
        operatorSelect.appendChild(placeholderOption);
    }

    // Add event listener for existing "field" dropdown menus
    document.querySelectorAll('.field-select').forEach(fieldSelect => {
        fieldSelect.addEventListener('change', function() {
            updateOperators(fieldSelect);
        });
    });

    // Initialize operators for existing fields
    document.querySelectorAll('.filter').forEach(filterDiv => {
        const fieldSelect = filterDiv.querySelector('.field-select');
        updateOperators(fieldSelect, false);
    });

    // Announce changes to screen readers
    function announce(message) {
        const announcer = document.getElementById('filter-announcer');
        if (announcer) {
            announcer.textContent = '';
            setTimeout(() => { announcer.textContent = message; }, 50);
        }
    }

    // Get next filter index
    function getNextFilterIndex() {
        const filters = document.querySelectorAll('#filters .filter > [data-filter-index]');
        let maxIndex = -1;
        filters.forEach(f => {
            const idx = parseInt(f.dataset.filterIndex, 10);
            if (idx > maxIndex) maxIndex = idx;
        });
        return maxIndex + 1;
    }

    // Add Filter Button
    function addFilter() {
        const newIndex = getNextFilterIndex();

        // Create a new filter
        const filterDiv = document.createElement('div');
        filterDiv.classList.add('filter', 'flex', 'flex-col', 'gap-2');
        filterDiv.innerHTML = `{% include "insight_ui/components/search_query_builder/sq_builder_filter.html" %}`;

        // Update all index-based IDs and attributes
        filterDiv.innerHTML = filterDiv.innerHTML
            .replace(/data-filter-index="[^"]*"/g, `data-filter-index="${newIndex}"`)
            .replace(/aria-label="[^"]*"/g, `aria-label="{% trans 'Filter' %} ${newIndex + 1}"`)
            .replace(/id="field-[^"]*"/g, `id="field-${newIndex}"`)
            .replace(/for="field-[^"]*"/g, `for="field-${newIndex}"`)
            .replace(/id="operator-[^"]*"/g, `id="operator-${newIndex}"`)
            .replace(/for="operator-[^"]*"/g, `for="operator-${newIndex}"`)
            .replace(/id="value-[^"]*"/g, `id="value-${newIndex}"`)
            .replace(/for="value-[^"]*"/g, `for="value-${newIndex}"`)
            .replace(/id="optionAND-[^"]*"/g, `id="optionAND-${newIndex}"`)
            .replace(/for="optionAND-[^"]*"/g, `for="optionAND-${newIndex}"`)
            .replace(/id="optionOR-[^"]*"/g, `id="optionOR-${newIndex}"`)
            .replace(/for="optionOR-[^"]*"/g, `for="optionOR-${newIndex}"`)
            .replace(/name="logic-[^"]*"/g, `name="logic-${newIndex}"`);

        document.getElementById('filters').appendChild(filterDiv);

        // Update the operators for the new dropdown
        const fieldSelect = filterDiv.querySelector('.field-select');
        updateOperators(fieldSelect);

        // Add event listener for the new dropdown
        fieldSelect.addEventListener('change', function() {
            updateOperators(fieldSelect);
        });

        // Announce to screen readers
        announce("{% trans 'Filter added' %}");
    };

    // Removing a filter
    document.addEventListener('click', function(e) {
        const removeButton = e.target.closest('.remove-filter');
        if (removeButton) {
            const filterGroup = removeButton.closest('.filter')?.querySelector('[data-filter-index]');
            const filterLabel = filterGroup?.getAttribute('aria-label') || "{% trans 'Filter' %}";
            removeButton.closest('.filter')?.remove();
            // Announce removal with filter label
            announce(filterLabel + " {% trans 'removed' %}");
        }
    });

    // Submit-Handler
    document.getElementById('filter-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const filters = [];
        // Collect filter values
        document.querySelectorAll('.filter').forEach(function(filterDiv) {
            const field = filterDiv.querySelector('[name="field"]').value;
            const operator = filterDiv.querySelector('[name="operator"]').value;
            const value = filterDiv.querySelector('[name="value"]').value;
            const logicValue = filterDiv.querySelector('[name^="logic"]:checked');

            let logic = null;
            if (logicValue)
                logic = logicValue.value;

            filters.push({ field, operator, value, logic });
        });

        // Build url and make request
        const url = new URL(window.location.href);
        url.searchParams.set('custom_filters', JSON.stringify(filters));
        window.location.href = url;
    });
</script>