"use client"

import { Loader2Icon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/src/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/src/components/ui/dialog"
import { useDeleteMenuItemMutation } from "@/src/state/menu"
import type { MenuItem } from "@/src/state/menu"
import { extractErrorMessage } from "../utils"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  item: MenuItem | null
}

export function DeleteItemDialog({ open, onOpenChange, item }: Props) {
  const [deleteMenuItem, { isLoading }] = useDeleteMenuItemMutation()

  const handleDelete = async () => {
    if (!item) return
    try {
      await deleteMenuItem(item.id).unwrap()
      toast.success("Article supprimé")
      onOpenChange(false)
    } catch (err) {
      toast.error(extractErrorMessage(err, "Erreur lors de la suppression"))
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[534px]">
        <DialogHeader>
          <DialogTitle>Supprimer l&apos;article</DialogTitle>
          <DialogDescription>
            Êtes-vous sûr de vouloir supprimer{" "}
            <span className="font-medium text-foreground">&quot;{item?.name}&quot;</span> ?
            Cette action est irréversible.
          </DialogDescription>
        </DialogHeader>

        <div className="flex justify-end gap-2 pt-2">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
            Annuler
          </Button>
          <Button variant="destructive" onClick={handleDelete} disabled={isLoading}>
            {isLoading && <Loader2Icon className="animate-spin" />}
            Supprimer
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}