<script setup lang="ts">
// types

type Option = {
    name: string;
    children: { name: string }[];
};

type Props = {
    options: Option[];
    modelValue: string[];
};

// props

const props = defineProps<Props>();

const { modelValue } = toRefs(props);

// emit

const emit = defineEmits(["update:modelValue"]);

// state

const value = ref<string[]>([]);

// watch

watch(
    () => value.value,
    (newValue) => {
        emit("update:modelValue", newValue);
    }
);

watch(
    () => modelValue.value,
    (newValue: string[]) => {
        value.value = newValue;
    },
    {
        immediate: true,
    }
);
</script>

<template>
    <ComboboxRoot class="relative" dir="rtl" :multiple="true" v-model="value">
        <ComboboxAnchor
            class="w-full inline-flex items-center justify-between rounded-full border border-slate-200 hover:border-slate-300 focus:border-slate-800 px-[1rem] text-sm leading-none py-3.5 gap-[5px] bg-slate-50 text-black hover:bg-white/90 transition-all data-[placeholder]:text-black/80 typo-label-sm outline-none"
        >
            <ComboboxInput
                class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-stone-400"
                placeholder="جست و جوی دسته بندی"
            />
            <ComboboxTrigger>
                <Icon name="ci:chevron-down" class="size-5" />
            </ComboboxTrigger>
        </ComboboxAnchor>

        <ComboboxContent
            class="absolute z-10 w-full mt-1.5 bg-slate-50 overflow-hidden rounded-3xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
        >
            <ComboboxViewport class="p-[1rem]">
                <ComboboxEmpty
                    class="text-mauve8 text-xs font-medium text-center py-5"
                />

                <template v-for="(group, index) in options" :key="group.name">
                    <ComboboxGroup>
                        <ComboboxSeparator
                            v-if="index !== 0"
                            class="h-[1px] bg-slate-200 m-[1rem]"
                        />

                        <ComboboxLabel
                            class="px-[1.2rem] w-full text-sm bg-black text-white rounded-full leading-[25px] py-1.5"
                        >
                            {{ group.name }}
                        </ComboboxLabel>

                        <ComboboxItem
                            v-for="option in group.children"
                            :key="option.name"
                            :value="option.name"
                            class="text-sm leading-none text-black/90 my-1.5 rounded-full hover:!bg-slate-200 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
                        >
                            <ComboboxItemIndicator
                                class="absolute left-3 w-[25px] inline-flex items-center justify-center"
                            >
                                <Icon name="ci:checkmark" size="18" />
                            </ComboboxItemIndicator>
                            <span>
                                {{ option.name }}
                            </span>
                        </ComboboxItem>
                    </ComboboxGroup>
                </template>
            </ComboboxViewport>
        </ComboboxContent>
    </ComboboxRoot>
</template>

<style scoped></style>
