<script setup lang="ts">
import { computed } from "vue";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import { searchItems, type SearchItem } from "@/lib/searchData";
import { useRouter } from "vue-router";
import { Search, Monitor, Briefcase, HelpCircle, FileText, Globe } from "lucide-vue-next";

const props = defineProps<{ open: boolean }>();
const emit = defineEmits<{ "update:open": [value: boolean] }>();

const router = useRouter();

const runCommand = (command: () => unknown) => {
  emit("update:open", false);
  command();
};

const getIcon = (type: string) => {
  switch (type) {
    case "Page":
      return Monitor;
    case "Business":
      return Briefcase;
    case "Support":
      return HelpCircle;
    case "Legal":
      return FileText;
    default:
      return Search;
  }
};

const onSelect = (item: SearchItem) => {
  if (item.url.startsWith("http")) {
    runCommand(() => window.open(item.url, "_blank"));
  } else {
    runCommand(() => router.push(item.url));
  }
};

const pages = searchItems.filter((item) => item.type === "Page");
const business = searchItems.filter((item) => item.type === "Business");
const support = searchItems.filter((item) => item.type === "Support");

const openModel = computed({
  get: () => props.open,
  set: (v: boolean) => emit("update:open", v),
});
</script>

<template>
  <CommandDialog v-model:open="openModel">
    <CommandInput placeholder="Rechercher une page ou un service..." />
    <CommandList>
      <CommandEmpty>Aucun résultat trouvé.</CommandEmpty>

      <CommandGroup v-if="pages.length > 0" heading="Pages Principales">
        <CommandItem
          v-for="item in pages"
          :key="item.id"
          :value="`${item.title} ${item.keywords?.join(' ')}`"
          @select="onSelect(item)"
        >
          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
          <span>{{ item.title }}</span>
          <Globe v-if="item.id === 'client-portal'" class="ml-auto h-4 w-4 text-muted-foreground" />
        </CommandItem>
      </CommandGroup>

      <CommandSeparator />

      <CommandGroup v-if="business.length > 0" heading="Solutions Affaires">
        <CommandItem
          v-for="item in business"
          :key="item.id"
          :value="`${item.title} ${item.keywords?.join(' ')}`"
          @select="onSelect(item)"
        >
          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
          <span>{{ item.title }}</span>
        </CommandItem>
      </CommandGroup>

      <CommandSeparator />

      <CommandGroup v-if="support.length > 0" heading="Support & Aide">
        <CommandItem
          v-for="item in support"
          :key="item.id"
          :value="`${item.title} ${item.keywords?.join(' ')}`"
          @select="onSelect(item)"
        >
          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
          <span>{{ item.title }}</span>
          <Globe v-if="item.id === 'client-portal'" class="ml-auto h-4 w-4 text-muted-foreground" />
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </CommandDialog>
</template>
