@props([
    'name'        => '',
    'options'     => [],
    'value'       => [],
    'placeholder' => '',
    'label'       => '',
])

<v-multiselect
    class="block w-full"
    name="{{ $name }}"
    :options="{{ json_encode($options) }}"
    :value="{{ json_encode(array_values((array) $value)) }}"
    placeholder="{{ $placeholder ?: trans('admin::app.components.datagrid.toolbar.search.title') }}"
    label="{{ $label }}"
    {{ $attributes }}
>
    <div class="shimmer h-[42px] w-full rounded-md"></div>
</v-multiselect>

@pushOnce('scripts')
    <script
        type="text/x-template"
        id="v-multiselect-template"
    >
        <div class="relative w-full">
            <v-field
                :name="name"
                :rules="rules"
                :label="label"
                v-model="selectedIds"
                v-slot="{ errors }"
            >
                <div
                    class="flex min-h-[42px] w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-md border bg-white px-2 py-1.5 text-sm text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
                    :class="[
                        errors.length ? 'border !border-red-600 hover:!border-red-600' : '',
                        isOpen ? 'border-gray-400 dark:border-gray-400' : '',
                    ]"
                    :name="name"
                    @click="toggleDropdown"
                >
                    <span
                        class="inline-flex max-w-full items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-600 dark:bg-gray-800 dark:text-gray-300"
                        v-for="option in selectedOptions"
                        :key="option.id"
                    >
                        <span class="truncate">@{{ option.label }}</span>

                        <span
                            class="icon-cross cursor-pointer text-base leading-none hover:text-red-600"
                            role="button"
                            @click.stop="deselect(option.id)"
                        ></span>
                    </span>

                    <span
                        class="px-1 text-gray-400 dark:text-gray-500"
                        v-if="! selectedOptions.length"
                    >
                        @{{ placeholder }}
                    </span>

                    <span
                        class="icon-arrow-down flex items-center text-2xl text-gray-500 transition-transform ltr:ml-auto rtl:mr-auto dark:text-gray-400"
                        :class="{ 'rotate-180': isOpen }"
                    ></span>
                </div>

                <div
                    class="absolute left-0 z-20 mt-1 w-full overflow-hidden rounded-md border bg-white shadow-lg dark:border-gray-800 dark:bg-gray-900"
                    v-show="isOpen"
                >
                    <div class="border-b p-2 dark:border-gray-800">
                        <div class="relative">
                            <input
                                type="text"
                                ref="searchInput"
                                class="block w-full rounded-md border bg-white py-1.5 text-sm leading-6 text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400 ltr:pl-3 ltr:pr-9 rtl:pl-9 rtl:pr-3"
                                :placeholder="searchPlaceholder"
                                v-model="search"
                                @keydown.delete="removeLastOnBackspace"
                            />

                            <span class="icon-search pointer-events-none absolute top-1.5 flex items-center text-2xl text-gray-400 ltr:right-2 rtl:left-2"></span>
                        </div>
                    </div>

                    <div class="max-h-60 overflow-y-auto py-1">
                        <div
                            class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition-all hover:bg-gray-100 dark:hover:bg-gray-800"
                            :class="isSelected(option.id)
                                ? 'font-semibold text-blue-600 dark:text-blue-500'
                                : 'text-gray-600 dark:text-gray-300'"
                            v-for="option in filteredOptions"
                            :key="option.id"
                            @click="toggle(option.id)"
                        >
                            <span class="truncate">@{{ option.label }}</span>

                            <span
                                class="icon-checked shrink-0 text-xl text-blue-600 dark:text-blue-500"
                                v-show="isSelected(option.id)"
                            ></span>
                        </div>

                        <p
                            class="px-3 py-2.5 text-sm text-gray-400 dark:text-gray-500"
                            v-if="! filteredOptions.length"
                        >
                            @lang('admin::app.components.datagrid.filters.dropdown.searchable.no-results')
                        </p>
                    </div>
                </div>
            </v-field>

            <input
                type="hidden"
                :name="name"
                :value="id"
                v-for="id in selectedIds"
                :key="'selected-' + id"
            />
        </div>
    </script>

    <script type="module">
        app.component('v-multiselect', {
            template: '#v-multiselect-template',

            props: {
                name: {
                    type: String,
                    required: true,
                },

                options: {
                    type: Array,
                    default: () => [],
                },

                value: {
                    type: Array,
                    default: () => [],
                },

                rules: {
                    type: [String, Object],
                    default: '',
                },

                placeholder: {
                    type: String,
                    default: '',
                },

                label: {
                    type: String,
                    default: '',
                },
            },

            data() {
                return {
                    selectedIds: this.value.map((id) => String(id)),

                    search: '',

                    isOpen: false,

                    searchPlaceholder: "@lang('admin::app.components.datagrid.toolbar.search.title')",
                };
            },

            computed: {
                selectedOptions() {
                    return this.selectedIds
                        .map((id) => this.options.find((option) => String(option.id) === id))
                        .filter((option) => option);
                },

                filteredOptions() {
                    let term = this.search.trim().toLowerCase();

                    if (! term) {
                        return this.options;
                    }

                    return this.options.filter((option) => String(option.label).toLowerCase().includes(term));
                },
            },

            mounted() {
                document.addEventListener('click', this.handleOutsideClick);
            },

            beforeUnmount() {
                document.removeEventListener('click', this.handleOutsideClick);
            },

            methods: {
                isSelected(id) {
                    return this.selectedIds.includes(String(id));
                },

                /**
                 * Always reassign `selectedIds` with a fresh array reference so the
                 * `v-model` bound VeeValidate field detects the change and revalidates
                 * (mutating the array in place would not clear the required error).
                 */
                toggle(id) {
                    if (this.isSelected(id)) {
                        this.deselect(id);
                    } else {
                        this.selectedIds = [...this.selectedIds, String(id)];
                    }

                    this.$nextTick(() => this.$refs.searchInput?.focus());
                },

                deselect(id) {
                    this.selectedIds = this.selectedIds.filter((selectedId) => selectedId !== String(id));
                },

                removeLastOnBackspace() {
                    if (this.search === '' && this.selectedIds.length) {
                        this.selectedIds = this.selectedIds.slice(0, -1);
                    }
                },

                openDropdown() {
                    this.isOpen = true;

                    this.$nextTick(() => this.$refs.searchInput?.focus());
                },

                closeDropdown() {
                    this.isOpen = false;

                    this.search = '';
                },

                toggleDropdown() {
                    this.isOpen ? this.closeDropdown() : this.openDropdown();
                },

                handleOutsideClick(event) {
                    if (! this.$el.contains(event.target)) {
                        this.closeDropdown();
                    }
                },
            },
        });
    </script>
@endPushOnce