import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from "@mui/material";
import React, { PropsWithChildren } from "react";

type ConfirmContext = (
  message: string,
  title?: string,
  confirmButton?: string,
  cancelButton?: string
) => Promise<boolean>;

const ConfirmContextK = React.createContext<ConfirmContext | null>(null);

export function ConfirmDialogProvider(
  p: PropsWithChildren
): React.ReactElement {
  const [open, setOpen] = React.useState(false);

  const [title, setTitle] = React.useState<string | undefined>(undefined);
  const [message, setMessage] = React.useState("");
  const [confirmButton, setConfirmButton] = React.useState<string | undefined>(
    undefined
  );
  const [cancelButton, setCancelButton] = React.useState<string | undefined>(
    undefined
  );

  const cb = React.useRef<null | ((a: boolean) => void)>(null);

  const handleClose = (confirm: boolean) => {
    setOpen(false);

    if (cb.current !== null) cb.current(confirm);
    cb.current = null;
  };

  const hook: ConfirmContext = (
    message,
    title,
    confirmButton,
    cancelButton
  ) => {
    setTitle(title);
    setMessage(message);
    setConfirmButton(confirmButton);
    setCancelButton(cancelButton);
    setOpen(true);

    return new Promise((res) => {
      cb.current = res;
    });
  };

  return (
    <>
      <ConfirmContextK value={hook}>
        {p.children}
      </ConfirmContextK>

      <Dialog
        open={open}
        onClose={() => { handleClose(false); }}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {message}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => { handleClose(false); }} autoFocus>
            {cancelButton ?? "Cancel"}
          </Button>
          <Button onClick={() => { handleClose(true); }} color="error">
            {confirmButton ?? "Confirm"}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export function useConfirm(): ConfirmContext {
  return React.use(ConfirmContextK)!;
}
