<script setup lang="ts">
import type { LinkItem, ListItemDto } from './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')!

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

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

function del() {
  recId.value = props.rec.id || 0
  recAction.value = 'showConfirmDel'
  recItem.value = props.rec
}

const linkItems: LinkItem[] = [
  {
    label: 'Detail',
    onClick: () => {
      detail()
    },
    icon: 'i-lucide-eye',
  },
  {
    label: 'Edit',
    onClick: () => {
      edit()
    },
    icon: 'i-lucide-pencil',
  },
  {
    label: 'Hapus',
    onClick: () => {
      del()
    },
    icon: 'i-lucide-trash',
  },
]
</script>

<template>
  <div>
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <SidebarMenuButton
          size="lg"
          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
        >
          <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 bg-white" align="end">
        <DropdownMenuGroup>
          <DropdownMenuItem
            v-for="item in linkItems"
            :key="item.label"
            v-slot="{ active }"
            class="hover:bg-gray-100"
            @click="item.onClick"
          >
            <Icon :name="item.icon" />
            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>
</template>
