import React, { useState, forwardRef } from "react";
import { Dialog } from "@mui/material";
import { twJoin } from "tailwind-merge";

import { Icon } from "../icon/Icon";
import { Typography } from "../typography/Typography";
import { Button } from "../button/Button";
import type { IconProps } from "../icon/Icon";
import { Checkbox } from "../checkbox/Checkbox";

export interface ConfirmDialogProps {
  isOpen: boolean;
  icon?: IconProps["name"];
  title: string;
  children?: string | React.ReactNode;
  primaryActionText?: string;
  secondaryActionText?: string;
  variant?: "confirm" | "alert" | "warning";
  onConfirm: (isConfirmChecked?: boolean) => void;
  onCancel: () => void;
  confirmMessage?: string;
  isConfirmRequired?: boolean;
  width?: number;
}

export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
  (props, ref) => {
    const {
      icon,
      title,
      children,
      isOpen,
      variant = "confirm",
      primaryActionText,
      secondaryActionText,
      onConfirm,
      onCancel,
      confirmMessage,
      isConfirmRequired,
      width = 260,
    } = props;

    const [isConfirmChecked, setIsConfirmChecked] = useState(false);

    return (
      <Dialog
        id="confirm-dialog"
        onClose={onCancel}
        open={isOpen}
        classes={{ paper: "shadow-S500 bg-N0 rounded-8 m-0 mb-[120px]" }}
        slotProps={{ backdrop: { className: "bg-N200A" } }}
      >
        <form
          onSubmit={(e) => {
            e.preventDefault();
            onConfirm(isConfirmChecked);
          }}
        >
          <div
            ref={ref}
            className="flex flex-col items-start pt-20"
            style={{ width }}
          >
            {icon && (
              <div
                className={twJoin(
                  "flex w-full items-center justify-center pb-8",
                  variant === "warning"
                    ? "text-Y400"
                    : variant === "alert"
                    ? "text-R400"
                    : "text-B400"
                )}
              >
                <Icon name={icon} size="40" />
              </div>
            )}
            <div className="box-border flex w-full flex-col items-center gap-8 px-20 py-4">
              {title && (
                <div className="flex w-full justify-center p-0 text-center">
                  <Typography weight="bold">{title}</Typography>
                </div>
              )}
              {children && (
                <div className="text-style-B200 w-full text-center">
                  <Typography>{children}</Typography>
                </div>
              )}
            </div>
            {confirmMessage && (
              <div className="flex w-full flex-col items-center justify-center gap-10 p-0 pt-12">
                <div className="box-border flex w-full justify-center border-x-0 border-y-1 border-solid border-N30 px-20 py-8">
                  <Checkbox
                    id="confirm-checkbox"
                    checked={isConfirmChecked}
                    onChange={(event) =>
                      setIsConfirmChecked(event.target.checked)
                    }
                    label={confirmMessage}
                  />
                </div>
              </div>
            )}
            <div className="box-border flex w-full flex-row items-center justify-center gap-8 p-20">
              <Button
                variant="secondary"
                fullWidth
                onClick={onCancel}
                ESCAPE_className={variant === "warning" ? "bg-N30" : undefined}
              >
                {secondaryActionText}
              </Button>
              <Button
                type="submit"
                variant={
                  variant === "alert"
                    ? "danger"
                    : variant === "confirm"
                    ? "primary"
                    : "secondary"
                }
                fullWidth
                disabled={
                  !!confirmMessage && !isConfirmChecked && isConfirmRequired
                }
              >
                {primaryActionText}
              </Button>
            </div>
          </div>
        </form>
      </Dialog>
    );
  }
);
