{% extends 'django_spire/form/field/base_field.html' %}

{% block field_content %}
    <input
            type="text"
            x-model="value"
            x-ref="glue_field"
            hidden
    >

    <div
            class="position-relative"
            x-data="{
            placeholder: '------------',
            show_dropdown: false,
            search: '',
            is_search_focused: false,
            choice_verbose: this.placeholder,

            init() {
                this.update_choice();

                $watch('value', (value) => {
                    this.update_choice();
                });

                $watch('glue_field.choices', () => {
                    this.update_choice();
                });
            },

            get filtered_choices() {
                return glue_field.choices.filter(choice => {
                    let label = choice[1].toLowerCase();
                    let search = this.search.toLowerCase();
                    return label.includes(search);
                });
            },

            focus_input() {
                if (!is_touch_device()) {
                    this.$nextTick(() => {
                        if (this.show_dropdown) {
                            this.$refs.search_input.focus();
                        }
                    });
                }
            },

            handle_click(event) {
                if (!this.$refs.search_input.contains(event.target) && !this.is_search_focused || !this.is_search_focused && this.show_dropdown) {
                    this.show_dropdown = false;
                }
            },

            select_choice(choice) {
                this.value = choice[0];
                this.search = '';
                this.show_dropdown = false;
            },

            update_choice() {
                let match = this.glue_field.choices.find(choice => String(choice[0]) === String(this.value));
                this.choice_verbose = match ? match[1] : this.placeholder;
            }
        }"
            @click.outside="handle_click"
    >
        <button
                class="form-control text-start d-flex justify-content-between"
                type="button"
                style="outline: none; box-shadow: none;"
                @click="$event.target.blur(); focus_input(); show_dropdown = !show_dropdown;"
        >
            <span x-text="choice_verbose"></span>

            <span class="d-flex align-items-center">
                {% include 'django_spire/form/field/element/select_down_arrow_element.html' %}
            </span>
        </button>

        <div
                x-show="show_dropdown"
                class="shadow border rounded-2 mt-2 position-absolute z-3 bg-app-glue-layer-one w-100 p-0 list-group"
                style="max-height: 300px; overflow-y: auto; z-index: 3;"
                @keydown.escape="show_dropdown = false"
        >
            <div class="glue-fs--2 fw-bold ms-2 mt-1">
                Select <span x-text="glue_field.label"></span>
            </div>

            <div class="m-2">
                <input
                        x-model="search"
                        class="form-control glue-fs--2"
                        placeholder="Search..."
                        type="text"
                        x-ref="search_input"
                        @blur="setTimeout(() => is_search_focused = false, 150)"
                        @keydown.enter.prevent="select_choice(filtered_choices[0])"
                >
            </div>

            <template x-for="(choice, index) in filtered_choices" :key="choice[0]">
                <div
                        class="py-1 d-flex align-items-center list-group-item px-0"
                        tabindex="0"
                        @click="glue_field.disabled_choices.includes(choice[0]) ? '' : select_choice(choice)"
                        :class="glue_field.disabled_choices.includes(choice[0]) ? 'opacity-50 glue-user-select glue-cursor-not-allowed' : 'glue-cursor-pointer bg-app-glue-layer-one-hover'"
                        @keydown.enter.prevent="select_choice(choice)"
                >
                    {% block choice_item %}
                        {% include 'django_spire/form/field/item/select_choice_item.html' %}
                    {% endblock %}
                </div>
            </template>
        </div>
    </div>
{% endblock %}
