import { type Row } from '@tanstack/react-table'
import { MoreHorizontal } from 'lucide-react'

import { Button } from '@/components/ui/button.tsx'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu.tsx'
import { type SysApi } from '@/schemas'

import { useCrud } from './crud-provider'

type Props = {
  row: Row<SysApi>
}

export function RowActions({ row }: Props) {
  const { setAction, setCurrentRow } = useCrud()
  const { original } = row

  const onEdit = () => {
    setAction('edit')
    setCurrentRow(original)
  }

  const onDelete = () => {
    setAction('delete')
    setCurrentRow(original)
  }

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant='ghost' className='h-8 w-8 p-0'>
          <MoreHorizontal className='h-4 w-4' />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align='end'>
        <DropdownMenuLabel>操作</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onEdit}>编辑接口</DropdownMenuItem>

        <DropdownMenuItem onClick={onDelete}>删除接口</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}