{% extends 'django_spire/glue/form/widget/widget.html' %}
{% load django_glue %}

{% block widget_content %}
    <div
        class="position-relative"
        @click.outside="closeDropdown()"
        x-data="{
            showDropdown: false,
            searchQuery: '',
            openUp: false,

            getClippingRect() {
                let element = this.$refs.selectedInput.parentElement;

                while (element) {
                    let style = window.getComputedStyle(element);
                    let overflowY = style.overflowY;

                    if (['auto', 'scroll', 'hidden'].includes(overflowY)) {
                        return element.getBoundingClientRect();
                    }

                    element = element.parentElement;
                }

                return {
                    top: 0,
                    bottom: window.innerHeight,
                };
            },

            openDropdown() {
                this.searchQuery = '';
                field.clearSearch?.();
                const rect = this.$refs.selectedInput.getBoundingClientRect();
                const clippingRect = this.getClippingRect();
                const spaceBelow = clippingRect.bottom - rect.bottom;
                const spaceAbove = rect.top - clippingRect.top;

                this.openUp = spaceBelow < 260 && spaceAbove > spaceBelow;
                this.showDropdown = true;
                this.$nextTick(() => this.$refs.searchInput?.focus());
            },

            get dropdownStyle() {
                const verticalPosition = this.openUp ? 'bottom: 100%; margin-bottom: 0.25rem;' : 'top: 100%; margin-top: 0.25rem;';
                return `max-height: 250px; overflow-y: auto; z-index: 1070; ${verticalPosition}`;
            },

            get filteredChoices() {
                if (field?.choices_searchable) {
                    return field.isSearchingChoices ? [] : field?.choices || [];
                }

                const query = this.searchQuery.toLowerCase();

                return (field?.choices || []).filter(
                    choice => String(choice.label).toLowerCase().includes(query)
                        || String(choice.value).toLowerCase().includes(query)
                );
            },

            closeDropdown() {
                this.showDropdown = false;
                this.searchQuery = '';
                field.clearSearch?.();
            },

            async searchChoices() {
                if (!field?.choices_searchable) return;
                await field.searchChoices(this.searchQuery.trim());
            },

            selectItem(choice) {
                if (field.disabled) return;
                value = choice.value;
                this.closeDropdown();
                this.$nextTick(() => {
                    this.$refs.selectedInput?.dispatchEvent(new Event('input', {bubbles: true}));
                    this.$refs.selectedInput?.dispatchEvent(new Event('change', {bubbles: true}));
                });
            }
        }"
    >
        <div class="position-relative">
            <input
                x-ref="selectedInput"
                type="text"
                class="form-control"
                :class="{'is-invalid': field.hasErrors}"
                :value="field.selectedChoice?.label || ''"
                @focus="openDropdown()"
                @click="openDropdown()"
                readonly
                :disabled="field.disabled"
                placeholder="{% block search_placeholder %}Search ...{% endblock %}"
            >
            <div
                x-cloak
                x-show="showDropdown"
                class="shadow border rounded-2 position-absolute w-100 list-group bg-white"
                :style="dropdownStyle"
            >
                <div class="p-2 border-bottom bg-white">
                    <input
                        x-ref="searchInput"
                        type="text"
                        class="form-control form-control-sm"
                        x-model="searchQuery"
                        @input.stop.debounce.200ms="searchChoices()"
                        @change.stop
                        @keydown.escape="closeDropdown()"
                        placeholder="Search..."
                    >
                </div>
                <div
                    class="py-3 px-3 text-center text-muted"
                    x-show="field.choices_searchable && field.isSearchingChoices"
                >
                    Searching...
                </div>
                <template x-for="choice in filteredChoices" :key="choice.value">
                    <div
                        class="py-2 px-3 list-group-item cursor-pointer"
                        @click="selectItem(choice)"
                    >
                        <div x-text="choice.label"></div>
                    </div>
                </template>
                <template x-if="!field.isSearchingChoices && filteredChoices.length === 0 && searchQuery.length > 0">
                    <div class="py-3 px-3 text-center text-muted">
                        No results found
                    </div>
                </template>
                <div
                    class="py-3 px-3 text-center text-muted"
                    x-show="field.choices_searchable && !field.isSearchingChoices && searchQuery.length === 0"
                >
                    Start typing to search
                </div>
            </div>
        </div>
    </div>
{% endblock %}