<script setup lang="ts">
import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
import { ActionEvents } from '~/components/pub/my-ui/data/types'

const props = defineProps<{
  rec: ListItemDto
}>()

const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
const activeKey = ref<string | null>(null)
const activePosition = inject<Ref<string>>('position')!
const linkItemsFiltered = ref<LinkItem[]>([])
const linkItemsBase: LinkItem[] = [
   {
    label: 'Nothing',
    value: 'nothing',
    icon: 'i-lucide-file',
  },
]
const linkItems: LinkItem[] = [
  {
    label: 'Detail',
    value: 'detail',
    onClick: () => {
      detail()
    },
    icon: 'i-lucide-eye',
  },
  {
    label: 'Edit',
    value: 'edit',
    onClick: () => {
      edit()
    },
    icon: 'i-lucide-pencil',
  },
  {
    label: 'Print',
    value: 'print',
    onClick: () => {
      print()
    },
    icon: 'i-lucide-printer',
  },
  {
    label: 'Batalkan',
    value: 'cancel',
    onClick: () => {
      cancel()
    },
    icon: 'i-lucide-circle-x',
  },
  {
    label: 'Hapus',
    value: 'remove',
    onClick: () => {
      remove()
    },
    icon: 'i-lucide-trash',
  },
]

function detail() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showDetail
  recItem.value = props.rec
}

function edit() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showEdit
  recItem.value = props.rec
}

function print() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showPrint
  recItem.value = props.rec
}

function cancel() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showCancel
  recItem.value = props.rec
}

function remove() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showConfirmDelete
  recItem.value = props.rec
}

linkItemsFiltered.value = [...linkItemsBase]

function getLinks(position: string) {
  switch (position) {
    case 'medical':
      linkItemsFiltered.value = [...linkItems]
      break
    case 'verificator':
      linkItemsFiltered.value = [
        ...linkItems.filter((item) => ['detail', 'print'].includes(item.value || '')),
      ]
      break
    default:
      linkItemsFiltered.value = [...linkItemsBase]
      break
  }
}

getLinks(activePosition.value)

watch(activePosition, () => {
  getLinks(activePosition.value)
})
</script>

<template>
  <div>
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <SidebarMenuButton
          size="lg"
          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
        >
          <Icon
            name="i-lucide-chevrons-up-down"
            class="ml-auto size-4"
          />
        </SidebarMenuButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
        align="end"
      >
        <DropdownMenuGroup>
          <DropdownMenuItem
            v-for="item in linkItemsFiltered"
            :key="item.label"
            class="hover:bg-gray-100 dark:hover:bg-slate-700"
            @click="item.onClick"
            @mouseenter="activeKey = item.label"
            @mouseleave="activeKey = null"
          >
            <Icon :name="item.icon ?? ''" />
            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>
</template>
