<script lang="ts" setup>
import { PhCaretDown } from "@phosphor-icons/vue";
import { cn } from "@/lib/utils";
import type { Category } from "@@/models/Category";

const isPopoverOpen = ref<boolean>(false)

const props = defineProps<{
  placeholder?: string
}>()

const model = defineModel<Category>()

const { categories: availableCategories } = useCalendar()

const searchTerm = ref<string>("")

function handleCatSelect() {
  isPopoverOpen.value = false
}

const filteredCategories = computed(() =>
  searchTerm.value === ""
    ? availableCategories
    : availableCategories.filter((category) => {
      return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
    })
)
</script>

<template>
  <UiPopover v-model:open="isPopoverOpen">
    <UiPopoverTrigger as-child>
      <UiButton
        variant="outline"
        role="combobox"
        :aria-expanded="isPopoverOpen"
        aria-controls="event-category"
        class="w-full max-w-full justify-between hover:bg-secondary hover:text-primary-foreground"
      >
        <template v-if="!model">
          {{ props.placeholder }}
        </template>
        <template v-else>
          <span
            class="bgc"
            :class="cn(`element-${model.color}`)"
          >
            {{ capitalize(model.name) }}
          </span>
        </template>

        <PhCaretDown class="ml-2 size-4 shrink-0 opacity-50" />
      </UiButton>
    </UiPopoverTrigger>
    <UiPopoverContent
      id="event-category"
      align="start"
      side="bottom"
      :collision-padding="50"
      class="w-fit h-[33vh] p-0"
    >
      <UiCommand v-model="model" v-model:search-term="searchTerm">
        <UiCommandInput :placeholder="$t('entity.category.search')" />
        <UiCommandEmpty>{{ $t('entity.category.notFoundAny') }}</UiCommandEmpty>
        <UiCommandList>
          <UiCommandGroup>
            <UiCommandItem
              v-for="category in filteredCategories"
              :key="category.id"
              :value="category"
              class="cursor-pointer"
              @select="handleCatSelect"
            >
              <span
                class="bgc"
                :class="cn(`element-${category.color}`)"
              >
                {{ capitalize(category.name) }}
              </span>
            </UiCommandItem>
          </UiCommandGroup>
        </UiCommandList>
      </UiCommand>
    </UiPopoverContent>
  </UiPopover>
</template>
