<template>
    <template v-for="(item, idx) of options">
        <template v-if="item.type === 'item'">
            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select">
                <Icon v-if="item.icon" :icon="item.icon" />
                <span>{{ item.label }}</span>
                <span v-if="item.kbd"> {{ item.kbd }} </span>
            </DropdownMenuItem>
        </template>
        
        <template v-else-if="item.type === 'checkbox'">
            <DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" @update:checked="item.select">
                <DropdownMenuItemIndicator>
                    <Icon icon="radix-icons:check" />
                </DropdownMenuItemIndicator>
                <span>{{ item.label }}</span>
                <span v-if="item.kbd"> {{ item.kbd }} </span>
            </DropdownMenuCheckboxItem>
        </template>
        
        <template v-if="item.type === 'radio'">
            <DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
            <DropdownMenuRadioGroup @update:model-value="item.change">
                <DropdownMenuRadioItem v-for="option in item.items" :disabled="(option as any)?.disabled ?? false" :value="(option as any)?.value ?? option">
                    <DropdownMenuItemIndicator>
                        <Icon icon="radix-icons:dot-filled" />
                    </DropdownMenuItemIndicator>
                    <span>{{ (option as any)?.label || option }}</span>
                </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>

            <DropdownMenuSeparator v-if="idx !== options.length - 1" />
        </template>
        
        <template v-if="item.type === 'submenu'">
            <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                    <Icon v-if="item.icon" :icon="item.icon" />
                    <span>{{ item.label }}</span>
                    <Icon icon="radix-icons:chevron-right" />
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                        <DropdownContentRender :options="item.items" />
                    </DropdownMenuSubContent>
                </DropdownMenuPortal>
            </DropdownMenuSub>
        </template>
        
        <template v-if="item.type === 'group'">
            <DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
            <DropdownContetnRender :options="item.items" />

            <DropdownMenuSeparator v-if="idx !== options.length - 1" />
        </template>
    </template>
</template>

<script setup lang="ts">
import type { DropdownOption } from './DropdownMenu.vue';
import { Icon } from '@iconify/vue/dist/iconify.js';

const { options } = defineProps<{
    options: DropdownOption[]
}>();
</script>