<script setup lang="ts">
    import UIInput from '@/UI-kit/components/UI/inputs/UIInput.vue';
    import { ref, computed } from 'vue';
    import { useAutoAnimate } from '@formkit/auto-animate/vue';
    import UISvgIcon from '@/UI-kit/components/UI/svg-icon/UISvgIcon.vue';
    import { UIIcons } from '@/UI-kit/constants';

    interface ISelectOption {
        label: string;
        value: string | number;
    }

    interface Props {
        showSearchInput?: boolean;
        placeholderSearchInput?: string;
        emptyMessage?: string;
        selectedValue: string | number;
        options: ISelectOption[];
    }

    const emit = defineEmits(['select', 'close']);

    const props = withDefaults(defineProps<Props>(), {
        showSearchInput: false,
        placeholderSearchInput: 'Поиск...',
        emptyMessage: 'Совпадений не найдено',
    });

    const [list] = useAutoAnimate();

    const searchQuery = ref('');

    const filteredOptions = computed(() => {
        if (!searchQuery.value) return props.options;

        const query = searchQuery.value.toLowerCase();
        return props.options.filter((option) => option.label.toLowerCase().includes(query));
    });

    const handleSelect = (option: ISelectOption) => {
        emit('select', option);

        emit('close');
    };
</script>

<template>
    <div class="select-list">
        <div v-if="showSearchInput" class="search-wrapper">
            <UIInput v-model="searchQuery" :placeholder="placeholderSearchInput" />
        </div>
        <ul v-if="filteredOptions.length" ref="list" class="options-list">
            <li
                v-for="option in filteredOptions"
                :key="option.value"
                class="option-item"
                :class="{ '--selected': selectedValue === option.label }"
                @click="handleSelect(option)"
            >
                {{ option.label }}
                <UISvgIcon v-if="selectedValue === option.label" :name="UIIcons.Success" />
            </li>
        </ul>
        <div v-if="emptyMessage && !filteredOptions.length" class="empty-message">
            {{ emptyMessage }}
        </div>
    </div>
</template>

<style scoped lang="scss">
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .select-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 400px;
        overflow-y: auto;
    }

    .search-wrapper {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 8px 0 16px;
        background: var(--white);
    }

    .options-list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-direction: column;
    }

    .option-item {
        @include index.text(14px, 500, 24px);
        @include index.flex(row, 8px, center, space-between);

        text-align: start;
        cursor: pointer;
        transition: background-color 0.2s;

        & + & {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--gray-300);
        }

        &.--selected {
            color: var(--blue-500);
        }
    }

    .empty-message {
        @include index.text(14px, 500, 24px);

        padding: 8px 12px;
        color: var(--gray-400);
        text-align: center;
    }
</style>
