{% load static %}
{% load autocomplete %}
{% comment %} 
This is the main component template that creates the basic HTML structure.
{% endcomment %}
<div class="phac_aspc_form_autocomplete_focus_ring {{ disabled|yesno:'disabled,' }}">
  <div
    id="{{ component_id }}__container"
    class="phac_aspc_form_autocomplete"
    hx-preserve
  >
    {# Hidden input elements used to maintain the component's state #}
    {# and used when submitting forms #}
    <div id="{{ component_id }}">
      {% include "./values.html" %}
    </div>

    {# Data element used to store component state data #}
    <span
      id="{{ component_id }}__data"
      {% if not multiselect and selected_items|length == 1 %}
      data-phac-aspc-autocomplete="{{ selected_items.0.label }}"
      {% endif %}
    ></span>

    {% if label is not None %}
    <label for="{{ component_id }}__textinput" class="form-label">{{ label }}</label>
    {% endif %}

    {% include "./ac_container.html" %}
    <div
      class="results"
      role="listbox"
      id="{{ component_id }}__items"
      {% if multiselect %}
      aria-description="{% use_string "multiselect" custom_strings %}"
      aria-multiselectable="true"
      {% endif %}
    ></div>
    {# This region provides contextual information for screen readers #}
    <div role="region" class="live_info" id="{{ component_id }}__info" aria-live="polite">
        {% if selected_items|length > 0 %}
            {% for item in selected_items %}
                {% with item=item.label %}
                    {% use_string "item_selected" custom_strings %}
                {% endwith %}
            {% endfor %}
        {% else %}
            {% use_string "nothing_selected" custom_strings %}
        {% endif %}
    </div>  
  </div>
</div>
{# This code snippet loads the required CSS and JS if not already loaded. #}
<script>
    (function () {
        // Add CSS if not already added
        const ln = document.createElement('link');
        ln.href = '{% static 'autocomplete/css/autocomplete.css' %}';
        ln.rel = 'stylesheet';
        if (!Array.from(document.querySelectorAll('link')).map(s => s.href).includes(ln.href)) {
            document.getElementsByTagName('head')[0].appendChild(ln);
        }
        {% if not disabled %}
        {% comment %} If component is disabled no JS is required {% endcomment %}
        // Add JS if not already added
        const sc = document.createElement('script');
        sc.src = '{% static "autocomplete/js/autocomplete.js" %}';
        if (!Array.from(document.querySelectorAll('script')).map(s => s.src).includes(sc.src)) {
            document.body.appendChild(sc);
        }
        // Add click handler on container to set focus on <input> box
        document.querySelector('#{{ component_id }}__container').addEventListener(
            'mousedown',
            function(event) {
                const container = event.target.closest('.phac_aspc_form_autocomplete');
                const id = container.getAttribute('id');
                phac_aspc_autocomplete_blur_skip[id] = true;
            }
        );
        document.querySelector('#{{ component_id }}__container').addEventListener(
            'mouseup',
            function(event) {
                const container = event.target.closest('.phac_aspc_form_autocomplete');
                const id = container.getAttribute('id');
                phac_aspc_autocomplete_blur_skip[id] = false;
            }
        );
        document.querySelector('#{{ component_id }}__container').addEventListener(
            'click',
            function(event) {
                if (
                    event.target === this ||
                    event.target.classList.contains('ac_container') ||
                    event.target.classList.contains('textinput')
                ) {
                    return phac_aspc_autocomplete_click_handler(event);
                }
            }
        );
        document.body.addEventListener(
            'htmx:afterSettle', (event) => {
                if (event.detail.elt.getAttribute('id') === '{{ component_id }}__items') {
                    const shown = event.detail.elt.classList.contains('show');
                    const el = document.querySelector('#{{ component_id }}__textinput');
                    el.setAttribute('aria-expanded', shown);	
                }
            }
        );
        document.body.addEventListener(
        //document.querySelector('#{{ component_id }}__textinput').addEventListener(
            'htmx:oobAfterSwap', (event) => {
                if (event.detail.target.getAttribute('id') == '{{ component_id }}__textinput') {
                    setTimeout(() => {
                        const el = document.querySelector('#{{ component_id }}__textinput');
                        phac_aspc_autocomplete_set_initial_value(document.querySelector('#{{ component_id }}__container'), true);
                        el.selectionStart = el.selectionEnd = el.value.length;
                    }, 0)
                }
            }
        );
        document.body.addEventListener('htmx:configRequest', function(event) {
            const container = document.querySelector('#{{ component_id }}__container');
            if (
                container.contains(event.detail.elt) &&
                event.detail.path.endsWith('/toggle')
            ) {
                // HTMX will include the entire form for non get requests, so we update
                // it here.  If the name is being used in multiple locations in the
                // form, without this intervention it will not work as expected.
                event.detail.parameters = {
                    ...event.detail.parameters,
                    ...htmx.values(event.detail.elt, 'get'),
                }
            }
        });
        {% endif %}        
    })();
</script>
