<!-- Dropdown wrapper component -->
<script setup lang="ts">
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
import { DropdownOptionType } from '~src/admin/types';
import IconCheck from '../icons/IconCheck.vue';

// Props
const {
    options,
    menuWidth = 'normal',
    placement = 'bottom',
} = defineProps<{
    options: DropdownOptionType[];
    menuWidth?: 'normal' | 'wide';
    placement?: 'bottom' | 'bottom-end';
}>();

// Emits
const emit = defineEmits<{
    selectOption: [label: string];
}>();
</script>

<template>
    <ElDropdown :popper-class="`dropdown-menu menu-${menuWidth}`" :placement="(placement as any)">
        <!-- Dropdown trigger -->
        <span class="group outline-none">
            <slot></slot>
        </span>
        <!-- Dropdown trigger -->

        <!-- Dropdown menu -->
        <template #dropdown>
            <ElDropdownMenu>
                <!-- Single option -->
                <ElDropdownItem
                    v-for="(option, i) in options"
                    :key="i"
                    :class="[option.selected && 'is-selected', option?.disabled && 'is-disabled']"
                    :disabled="option?.disabled ?? false"
                    @click="!option?.disabled && emit('selectOption', option.label)"
                >
                    <!-- Label -->
                    <div>
                        <component :is="option.icon" v-if="option.icon" />
                        <span>{{ option.label }}</span>
                    </div>

                    <!-- Check -->
                    <IconCheck v-if="option.selected" />
                </ElDropdownItem>
                <!-- Single option -->
            </ElDropdownMenu>
        </template>
        <!-- Dropdown menu -->
    </ElDropdown>
</template>

<style lang="scss">
.el-popper.dropdown-menu {
    @apply border border-neutral-500 min-w-[192px];
    --el-border-color-light: theme('colors.neutral-500');
    --el-popper-border-radius: 8px;

    &.menu-wide {
        @apply min-w-[300px];
    }

    .el-scrollbar {
        border-radius: var(--el-popper-border-radius);
    }

    .el-dropdown-menu__item {
        @apply flex justify-between items-center text-base-500 px-4;
        --el-dropdown-menuItem-hover-fill: theme('colors.neutral-100');
        --el-dropdown-menuItem-hover-color: theme('colors.base-500');

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

        &.is-disabled {
            @apply pointer-events-none text-base-200;
        }

        svg {
            @apply fill-current;
        }

        > div {
            @apply flex gap-1.5 items-center;
        }
    }
}
</style>
