<template>
    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
        <span class="pb-1 md:p-0">{{ label }}</span>
        <ComboboxRoot v-model:model-value="model" v-model:open="open" :multiple="multiple">
            <ComboboxAnchor  :disabled="disabled" class="mx-4 inline-flex min-w-[150px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
                bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
                data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
                hover:border-light-50 dark:hover:border-dark-50">
                <ComboboxTrigger class="flex flex-1 justify-between !cursor-pointer">
                    <span v-if="!multiple">{{ model !== undefined ? options.find(e => e[1] === model)![0] : "" }}</span>
                    <span class="flex gap-2" v-else><span v-if="model !== undefined">{{ options.find(e => e[1] === (model as T[])[0]) !== undefined ? options.find(e => e[1] === (model as T[])[0])![0] : undefined }}</span><span v-if="model !== undefined && (model as T[]).length > 1">{{((model as T[]).length > 1 ? `+${(model as T[]).length - 1}` : "") }}</span></span>
                    <Icon icon="radix-icons:caret-down" class="h-4 w-4" />
                </ComboboxTrigger>
            </ComboboxAnchor>

            <ComboboxPortal :disabled="disabled">
                <ComboboxContent :position="position" align="start" class="min-w-[150px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-50">
                    <ComboboxViewport>
                        <ComboboxItem v-for="[label, value] of options" :value="value" :disabled="disabled" class="text-base py-2 leading-none text-light-60 dark:text-dark-60 flex items-center px-6 relative Combobox-none data-[disabled]:text-light-50 dark:data-[disabled]:text-dark-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-light-30 dark:data-[highlighted]:bg-dark-30 data-[highlighted]:text-light-100 dark:data-[highlighted]:text-dark-100">
                            <span class="">{{ label }}</span>
                            <ComboboxItemIndicator class="absolute left-1 w-4 inline-flex items-center justify-center">
                                <Icon icon="radix-icons:check" />
                            </ComboboxItemIndicator>
                        </ComboboxItem>
                    </ComboboxViewport>
                </ComboboxContent>
            </ComboboxPortal>
        </ComboboxRoot>
    </Label>
</template>

<script setup lang="ts" generic="T extends string | number | boolean | Record<string, any>">
import { ComboboxInput, ComboboxTrigger, ComboboxViewport, ComboboxContent, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { Icon } from '@iconify/vue/dist/iconify.js';
const { disabled = false, position = 'popper', multiple = false } = defineProps<{
	placeholder?: string
    disabled?: boolean
    position?: 'inline' | 'popper'
    label?: string
    multiple?: boolean
    options: Array<[string, T]>
}>();
const open = ref(false);
const model = defineModel<T | T[]>();
</script>