"use client"

import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Printer, Trash2 } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"

type PaymentReceivedActionsProps = {
    paymentId: string
}

export function PaymentReceivedActions({ paymentId }: PaymentReceivedActionsProps) {
    const api = useAuthApi()
    const router = useRouter()
    const { print, isPrinting } = useDocumentPrint()

    const handleDelete = async () => {
        await api.paymentReceived.destroy(paymentId)
        router.push("/sales/payment-received")
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                    <Ellipsis className="size-4" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => print("payment_received", paymentId, "print")} disabled={isPrinting}>
                    <Printer className="size-4" />
                    {isPrinting ? "Printing..." : "Print"}
                </DropdownMenuItem>
                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                    <Trash2 className="size-4" />
                    Delete
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}