import {useState} from 'react'

import {
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
  AlertDialog as AlertDialogPrimitive,
} from '../ui/alert-dialog'

/**
 * A composable component for important confirmations and alerts with customizable actions.
 * @publicDocs
 */
export interface AlertDialogAtomProps {
  /** The trigger element that opens the alert dialog */
  children: React.ReactNode
  /** The title text shown in the alert dialog header */
  title: string
  /** The description text shown in the alert dialog body */
  description: string
  /** The text shown in the cancel button */
  cancelButtonText?: string
  /** The text shown in the confirmation button */
  confirmationButtonText?: string
  /** Whether the alert dialog is open */
  open?: boolean
  /** Callback fired when the alert dialog open state changes */
  onOpenChange: (open: boolean) => void
  /** Callback fired when the confirmation button is clicked */
  onConfirmationAction: () => void
}

export const AlertDialogAtom = ({
  children,
  title,
  description,
  cancelButtonText,
  confirmationButtonText,
  open,
  onOpenChange,
  onConfirmationAction,
}: AlertDialogAtomProps) => {
  const [isOpen, setIsOpen] = useState(open)

  return (
    <AlertDialogPrimitive
      open={isOpen}
      onOpenChange={open => {
        setIsOpen(open)
        onOpenChange(open)
      }}
    >
      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{cancelButtonText}</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirmationAction}>
            {confirmationButtonText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialogPrimitive>
  )
}