<!-- Wrapper for Select input -->
<script setup lang="ts">
import { ElSelect, ElOption } from 'element-plus';
import { OptionType } from '~src/admin/types';

// Props with default values
const {
    options,
    placeholder = '',
    errorMsg = '',
    disabled = false,
} = defineProps<{
    options: OptionType[];
    placeholder?: string;
    errorMsg?: string;
    disabled?: boolean;
}>();

// Store current value
const value = defineModel<string>();
</script>

<template>
    <div class="w-full">
        <ElSelect
            :class="['custom-select', errorMsg && 'custom-select-error']"
            v-model="value"
            popper-class="select-options"
            :placeholder
            :disabled
        >
            <ElOption v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
        </ElSelect>

        <p class="text-xs leading-loose text-danger-500 mt-0.5" v-if="errorMsg">{{ errorMsg }}</p>
    </div>
</template>

<style lang="scss">
.custom-select {
    --el-input-border-color: theme('colors.neutral-500');
    --el-input-text-color: theme('colors.base-500');

    &.custom-select-error {
        .el-select__wrapper {
            @apply border-danger-500;
        }
    }

    .el-select__wrapper.is-disabled {
        @apply border-neutral-500 pointer-events-none;
        --el-disabled-bg-color: theme('colors.neutral-50');
        --el-select-disabled-color: theme('colors.base-200');

        &.is-hovering,
        &.is-focused {
            @apply border-neutral-500;
        }
    }

    .el-select__wrapper {
        @apply px-4 min-h-[40px] shadow-none rounded-lg border border-neutral-500 transition-colors;

        &.is-hovering,
        &.is-focused {
            @apply border-primary-500 shadow-none;
        }

        svg {
            @apply text-base-200;
        }

        img {
            margin-right: 0.25rem !important;
        }
    }
}

.el-popper.select-options {
    @apply border border-neutral-500;

    --el-popover-border-radius: 0.5rem;
    --el-timepicker-inner-border-color: theme('colors.neutral-500');
    --el-border-color-light: theme('colors.neutral-500');

    .el-select-dropdown__list {
        .el-select-dropdown__item {
            @apply font-primary text-base-500 m-0;

            &.is-selected {
                @apply text-primary-500;
            }

            &.is-hovering {
                @apply bg-neutral-100;
            }

            img {
                margin-right: 0.25rem !important;
            }
        }
    }
}
</style>
