<script setup>

const showCommandPalette = ref(false)
const selectedCommand = ref("")
const commandPaletteRef = ref()
const router = useRouter()
const dataStore = useDataStore()
const openCommandPalette = () => {
  showCommandPalette.value = true
  console.log("Open Command Palette")
}

defineShortcuts({
  meta_k: {
    usingInput: true,
    handler: () => {
      openCommandPalette()
    }
  }
})

const actions = [

  {
    id: 'new-task',
    label: 'Aufgabe hinzufügen',
    icon: 'i-heroicons-rectangle-stack',
    to: "/tasks/create" ,
  },
  {
    id: 'new-customer',
    label: 'Kunde hinzufügen',
    icon: 'i-heroicons-user-group',
    to: "/customers/create" ,
  },
  {
    id: 'new-vendor',
    label: 'Lieferant hinzufügen',
    icon: 'i-heroicons-truck',
    to: "/vendors/create" ,
  },
  {
    id: 'new-contact',
    label: 'Ansprechpartner hinzufügen',
    icon: 'i-heroicons-user-group',
    to: "/contacts/create" ,
  },
  {
    id: 'new-project',
    label: 'Projekt hinzufügen',
    icon: 'i-heroicons-clipboard-document-check',
    to: "/projects/create" ,
  },{
    id: 'new-plant',
    label: 'Objekt hinzufügen',
    icon: 'i-heroicons-clipboard-document',
    to: "/plants/create" ,
  },
  {
    id: 'new-product',
    label: 'Artikel hinzufügen',
    icon: 'i-heroicons-puzzle-piece',
    to: "/products/create" ,
  }
]


const groups = computed(() =>
    [{
      key: 'actions',
      commands: actions
    },{
      key: "customers",
      label: "Kunden",
      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
    },{
      key: "vendors",
      label: "Lieferanten",
      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
    },{
      key: "contacts",
      label: "Ansprechpartner",
      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
    },{
      key: "products",
      label: "Artikel",
      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
    },{
      key: "tasks",
      label: "Aufgaben",
      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
    },{
      key: "plants",
      label: "Objekte",
      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
    },{
      key: "projects",
      label: "Projekte",
      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
    }
    ].filter(Boolean))

function onSelect (option) {
  if (option.click) {
    option.click()
  } else if (option.to) {
    router.push(option.to)
  } else if (option.href) {
    window.open(option.href, '_blank')
  }

  showCommandPalette.value = false

}
</script>

<template>
  <UButton
      icon="i-heroicons-magnifying-glass"
      variant="ghost"
      @click="openCommandPalette"

  />

  <UModal
      v-model:open="showCommandPalette"
  >
    <template #content>
      <UCommandPalette
          v-model="selectedCommand"
          :groups="groups"
          :autoselect="false"
          @update:model-value="onSelect"
          ref="commandPaletteRef"
      />
    </template>
  </UModal>
</template>

<style scoped>

</style>
