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

{% block field_content %}
    {# This can be removed and need to insert input fields to have getlist and get effect #}
    <div
            class="position-relative"
            x-data="{
            show_dropdown: false,
            search: '',
            init () {
                this.parse_value()

                this.$watch('glue_field.value', value => {
                    this.parse_value()
                })
            },
            add_choice(choice) {
                this.glue_field.value.push(choice[0])
            },
            get get_selected_choices() {
                if (!Array.isArray(this.glue_field.value)) {
                    return []
                }
                return this.glue_field.choices.filter(choice => this.glue_field.value.includes(choice[0]))
            },
            get filtered_choices() {
                if (!Array.isArray(this.glue_field.value)) {
                    return []
                }

                const filtered_array = this.glue_field.choices.filter(choice => !this.glue_field.value.includes(choice[0]) && choice[1] !== '----------')

                const search = this.search.toLowerCase()
                return filtered_array.filter(filtered_choice => filtered_choice[1].toLowerCase().includes(search))
            },
            focus_input() {
                setTimeout(() => this.$refs.search_input.focus(), 100)
            },
            parse_value(){
                // It is already an array!
                if (Array.isArray(this.glue_field.value)) {
                    return
                }

                // Parse the initial value into an array.
                if (typeof(this.glue_field.value) == 'string' && this.glue_field.value.startsWith('[')){
                    value = JSON.parse(this.glue_field.value)
                    return
                }

                // Must be an array.
                this.glue_field.value = []
            },
            remove_choice(choice) {
                this.glue_field.value = this.glue_field.value.filter(val => val !== choice[0])
            },
        }"
    >
        <template x-for="choice in get_selected_choices" :key="choice[0]">
            <input hidden type="text" :name="glue_field.name" :value="choice[0]">

        </template>
        <div x-ref="inputs"></div>

        {% block selected_choices %}
            <button
                    class="form-control text-start d-flex justify-content-between"
                    type="button"
                    @click="show_dropdown = !show_dropdown; focus_input();"
            >
                <span class="d-flex flex-wrap align-items-center">
                    <template x-for="choice in get_selected_choices" :key="choice[0]">
                        <div class="d-inline-block my-1">
                            <span class="badge rounded-pill glue-fs--1 text-app-glue-primary fw-normal border me-1">
                                <span x-text="choice[1]"></span>
                            </span>
                        </div>
                    </template>

                    <template x-if="get_selected_choices.length === 0">
                        <span>----------</span>
                    </template>
                </span>

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

        <div
                x-cloak
                x-show="show_dropdown"
                @click.outside="show_dropdown = false"
                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: 350px; overflow-y: auto; z-index: 3;"
                @keydown.escape="show_dropdown = false"
                x-trap.inert="show_dropdown"
        >
            <div class="glue-fs--2 fw-bold ms-2 my-1">
                Select Many <span>"<span x-text="glue_field.label"></span>"</span>
            </div>

            <div class="m-1">
                <input
                        x-model="search"
                        class="form-control py-1 glue-fs--2"
                        placeholder="Search..."
                        type="text"
                        x-ref="search_input"
                        @keydown.enter.prevent="add_choice(filtered_choices[0])"
                >
            </div>

            <template x-for="(choice, index) in get_selected_choices" :key="index">
                <div
                        class="glue-cursor-pointer glue-user-select py-1 d-flex align-items-center list-group-item px-0 bg-app-glue-layer-one-hover"
                        tabindex="0"
                        @click="remove_choice(choice)"
                        @keydown.enter.prevent="remove_choice(choice)"
                >
                    {% block selected_choice_item %}
                        {% include 'django_spire/form/field/item/selected_choice_item.html' %}
                    {% endblock %}
                </div>
            </template>

            <template x-if="get_selected_choices.length > 0 && filtered_choices.length !== 0">
                <div>
                    <span class="d-block glue-fs--2 ms-3">Choices</span>
                </div>
            </template>

            <template x-for="(choice, index) in filtered_choices" :key="choice[0]">
                <div
                        class="glue-user-select py-1 d-flex align-items-center list-group-item px-0"
                        tabindex="0"
                        @click="glue_field.disabled_choices.includes(choice[0]) ? '' : add_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="add_choice(choice)"
                >
                    {% block choice_item %}
                        {% include 'django_spire/form/field/item/select_choice_item.html' %}
                    {% endblock %}
                </div>
            </template>

            <template x-if="filtered_choices.length === 0">
                <div class="py-1">
                    <span class="d-block glue-fs--2 ms-3">No available choices</span>
                </div>
            </template>
        </div>
    </div>
{% endblock %}