<script setup lang="ts">
import type { Row } from '@tanstack/vue-table'

import { Ellipsis, Pencil, Trash2, List } from 'lucide-vue-next'
import { useRouter } from 'vue-router'

import type { CloudVariable } from '../data/schema'

interface DataTableRowActionsProps {
  row: Row<CloudVariable>
}

const props = defineProps<DataTableRowActionsProps>()
const emit = defineEmits<{
  edit: [variable: CloudVariable]
  delete: [variable: CloudVariable]
}>()

const router = useRouter()
const variable = props.row.original

function viewRecords() {
  router.push(`/admin/cloud-variables/${variable.id}/records?app_id=${variable.app_id}`)
}
</script>

<template>
  <UiDropdownMenu>
    <UiDropdownMenuTrigger as-child>
      <UiButton
        variant="ghost"
        class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
      >
        <Ellipsis class="size-4" />
        <span class="sr-only">打开菜单</span>
      </UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent align="end" class="w-[160px]">
      <UiDropdownMenuItem v-if="variable.var_type === 'stream'" @click="viewRecords">
        <List class="mr-2 h-4 w-4" />
        查看记录
      </UiDropdownMenuItem>
      <UiDropdownMenuItem @click="emit('edit', variable)">
        <Pencil class="mr-2 h-4 w-4" />
        编辑
      </UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem class="text-destructive" @click="emit('delete', variable)">
        <Trash2 class="mr-2 h-4 w-4" />
        删除
      </UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>
