import { DotsHorizontalIcon } from '@radix-ui/react-icons'
import { type Row } from '@tanstack/react-table'
import { type User } from '@/types/users.types'
import { Trash2, UserPen, Eye } from 'lucide-react'
import { PERMISSIONS } from '@/constants/permissions'
import { useCan } from '@/hooks/use-can'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { useUsers } from './users-provider'

interface Props {
  row: Row<User>
}

export function DataTableRowActions({ row }: Props) {
  const { setOpen, setCurrentRow } = useUsers()
  const { can } = useCan()
  const canUpdate = can(PERMISSIONS.users.update)
  const canDelete = can(PERMISSIONS.users.delete)

  const user = row.original

  const handleEdit = () => {
    setCurrentRow(user)
    setOpen('edit')
  }

  const handleView = () => {
    setCurrentRow(user)
    setOpen('view')
  }

  const handleDelete = () => {
    setCurrentRow(user)
    setOpen('delete')
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant='ghost' className='flex h-8 w-8 p-0'>
          <DotsHorizontalIcon className='h-4 w-4' />
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align='end'>
        <DropdownMenuItem onClick={handleView}>
          مشاهده
          <DropdownMenuShortcut>
            <Eye size={16} />
          </DropdownMenuShortcut>
        </DropdownMenuItem>

        {canUpdate && (
          <DropdownMenuItem onClick={handleEdit}>
            ویرایش
            <DropdownMenuShortcut>
              <UserPen size={16} />
            </DropdownMenuShortcut>
          </DropdownMenuItem>
        )}

        {canDelete && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={handleDelete} className='text-red-600'>
              حذف
              <DropdownMenuShortcut>
                <Trash2 size={16} color='red' />
              </DropdownMenuShortcut>
            </DropdownMenuItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}