<script setup lang="ts">
    import { computed, defineAsyncComponent, ref } from 'vue';
    import { UIColor } from '@/UI-kit/constants';
    import { ISelectOption, ModalPositionTypes, UIColorName } from '@/UI-kit/types';
    import { useUIModalStore } from '@/UI-kit/store';
    import { ISelectProps } from '@/UI-kit/types/UI/ui-select.type';

    const { openModal } = useUIModalStore();

    const props = withDefaults(defineProps<ISelectProps>(), {
        placeholder: 'Выберите значение',
        disabled: false,
        isError: false,
        errorMessage: '',
        showSearchInput: false,
        placeholderSearchInput: '',
    });

    const emit = defineEmits(['update:model-value', 'click', 'input']);

    const borderColor = ref(UIColor[UIColorName.Gray300]);
    const bgColor = ref(UIColor[UIColorName.Gray4]);
    const colorDanger = ref(UIColor[UIColorName.Red600]);

    const textColor = computed(() =>
        props.modelValue ? UIColor[UIColorName.Gray900] : UIColor[UIColorName.Gray400],
    );

    const selectedOption = computed(
        () => props.options.find((item: ISelectOption) => item.value === props.modelValue) ?? null,
    );

    const selectedValue = computed(() => {
        if (!selectedOption.value) return '';
        if (props.useShortLabel)
            return selectedOption.value.shortLabel ?? selectedOption.value.label;
        return selectedOption.value.label;
    });

    const handleClick = () => {
        openModal({
            component: defineAsyncComponent(
                () => import('@/UI-kit/components/UI/select/components/List.vue'),
            ),
            modalProps: {
                isHaveCloseModal: true,
                isShowXBtn: true,
                title: props.modalLabel ?? props.label,
                position: ModalPositionTypes.BOTTOM,
                fixedHeight: true,
            },
            componentProps: {
                selectedValue: selectedValue.value,
                showSearchInput: props.showSearchInput,
                placeholderSearchInput: props.placeholderSearchInput,
                options: props.options!,
            },
            listeners: {
                select: (option: ISelectOption) => {
                    emit('update:model-value', option.value);
                    emit('input', option.value);
                },
            },
        });

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

<template>
    <div class="ui-select__wrap">
        <div class="ui-select__inner">
            <div v-if="label" class="ui-select__label" v-html="label" />
            <div
                class="ui-select"
                :class="{ '--disabled': disabled, '--error': isError }"
                @click="handleClick"
            >
                <span class="ui-select__value" :style="{ color: textColor }">
                    {{ selectedValue || props.placeholder }}
                </span>
                <svg
                    class="ui-select__arrow"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M4 6L8 10L12 6"
                        stroke="#999999"
                        stroke-width="1.5"
                        stroke-linecap="round"
                    />
                </svg>
            </div>
            <div v-if="isError" class="ui-select__error">
                {{ errorMessage }}
            </div>
        </div>
    </div>
</template>

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

    .ui-select {
        @include index.text(14px, 500, 100%);

        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 8px 16px;
        background: v-bind(bgColor);
        color: v-bind(textColor);
        border: 1px solid v-bind(borderColor);
        border-radius: 8px;
        text-align: left;
        box-sizing: border-box;
        outline: 0;
        cursor: pointer;
        transition: all 0.25s;
        -webkit-tap-highlight-color: transparent;

        &:hover:not(.--disabled),
        &:focus:not(.--disabled) {
            border-color: var(--blue-500);
        }

        &.--disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        &.--error {
            border-color: v-bind(colorDanger);
        }

        &__value {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &__arrow {
            flex-shrink: 0;
            margin-left: 8px;
            transition: transform 0.2s;
        }

        &__label {
            @include index.text(14px, 600, 20px);

            margin-bottom: 3px;
        }

        &__wrap {
            @include index.flex(column);

            width: 100%;
            gap: 0;
        }

        &__inner {
            position: relative;
            width: 100%;
        }

        &__error {
            text-align: left;
            color: v-bind(colorDanger);
            font-size: 12px;
        }
    }
</style>
