import { cn } from "@/lib/utils";
import { buttonVariants } from "@/ui";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/ui/alert-dialog";

import { useCallback, useState } from "react";

interface UseRemoveAlertDialogProps {
  isOpen?: boolean;
  onOpen?: () => void;
  onClose?: () => void;

  onCancel?: (event: React.SyntheticEvent) => void;
  onRemove?: (payload: any, event: React.SyntheticEvent) => void;
}

interface UseRemoveAlertDialogReturnType {
  RemoveAlertDialog: () => JSX.Element;
  open: (title: string, description: string, payload?: any) => void;
  close: () => void;
}

export const useRemoveAlertDialog = ({
  isOpen = false,
  onRemove,
  onCancel,
}: UseRemoveAlertDialogProps): UseRemoveAlertDialogReturnType => {
  const [visible, setVisible] = useState<boolean>(isOpen);

  const [title, setTitle] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [payload, setPayload] = useState<any>({});

  /*const cancelButtonProps = {
    cancelButtonText: "Cancelar",
    cancelButtonProps: {},
    onCancel,
  };

  const submitButtonProps = {
    submitButtonText: "Eliminar",
    submitButtonProps: {},
    onSubmit: (event: React.SyntheticEvent) => {
      if (onRemove) {
        onRemove(payload, event);
      }
    },
  };*/

  const open = useCallback(
    (title: string, description: string, payload: any = {}) => {
      setTitle(title);
      setDescription(description);
      setPayload(payload);
      setVisible(true);
    },
    []
  );

  const close = () => setVisible(false);

  const RemoveAlertDialog = (): JSX.Element => (
    <AlertDialog open={visible} onOpenChange={setVisible}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel onClick={onCancel}>Cancelar</AlertDialogCancel>
          <AlertDialogAction
            className={cn(
              buttonVariants({ variant: "destructive" }),
              "mt-2 sm:mt-0"
            )}
            onClick={(event) => (onRemove ? onRemove(payload, event) : null)}
          >
            Eliminar
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );

  return { RemoveAlertDialog, open, close };
};

/* 
    <ConfirmDialog
      dialogType="danger"
      title={title}
      description={description}
      {...cancelButton}
      {...continueButton}
      {...modalProps}
    >
      {children}
    </ConfirmDialog>
*/
