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

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

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

// props

const props = withDefaults(defineProps<Props>(), {
    placeholder: "جست و جو",
});

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" v-model="value">
        <ComboboxAnchor
            class="w-full inline-flex items-center justify-between rounded-xl border-[1.5px] border-slate-200 focus:border-slate-800 px-[1rem] text-sm leading-none py-3.5 gap-[5px] bg-slate-50 text-black hover:border-black 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-slate-400"
                :placeholder="placeholder"
            />
            <ComboboxTrigger class="cursor-pointer">
                <Icon name="ci:chevron-down" class="size-5" />
            </ComboboxTrigger>
        </ComboboxAnchor>

        <ComboboxContent
            class="absolute z-10 w-full mt-4 bg-slate-50 overflow-hidden rounded-xl 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-6"
                        />

                        <ComboboxLabel
                            class="flex items-center justify-between px-[1.2rem] w-full text-md text-black font-bold bg-slate-200/50 leading-[25px] py-3 rounded-lg"
                        >
                            <span>
                                {{ group.name }}
                            </span>
                            <Icon name="ci:delivery-boxes" size="18px"/>
                        </ComboboxLabel>

                        <ComboboxItem
                            v-for="option in group.children"
                            :key="option.name"
                            :value="option.name"
                            class="text-sm cursor-pointer leading-none text-slate-700 my-1.5 rounded-md hover:bg-slate-200/25 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>
                            <div class="flex items-center gap-2">
                                <Icon name="ci:minus" class="opacity-50"/>
                                <span>
                                     {{ option.name }}
                                 </span>
                            </div>
                        </ComboboxItem>
                    </ComboboxGroup>
                </template>
            </ComboboxViewport>
        </ComboboxContent>
    </ComboboxRoot>
</template>

<style scoped></style>
