HT_DASHBOARD_frontend/src/hooks/useDialog.tsx

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

type Props = {
  message?: string;
  onClose?: VoidFunction;
  onAgree?: VoidFunction;
  onDisagree?: VoidFunction;
};

export type UseDialogReturn = {
  show: boolean;
  open: VoidFunction;
  close: VoidFunction;
  setShow: (show: boolean) => void;
  element: ReactNode;
};

export function useDialog({
  message,
  onClose,
  onAgree,
  onDisagree,
}: Props = {}): UseDialogReturn {
  const [show, setShow] = useState(false);

  const open = () => {
    setShow(true);
  };

  const close = () => {
    if (onClose) {
      onClose();
    }
    setShow(false);
  };

  const agree = () => {
    if (onAgree) {
      onAgree();
    }
    setShow(false);
  };

  const disagree = () => {
    if (onDisagree) {
      onDisagree();
    }
    setShow(false);
  };

  const element = (
    <Dialog open={show} onClose={close}>
      <DialogTitle>確認</DialogTitle>
      {message && (
        <DialogContent>
          <DialogContentText>{message}</DialogContentText>
        </DialogContent>
      )}
      <DialogActions>
        <Button onClick={disagree}>CANCEL</Button>
        <Button onClick={agree}>OK</Button>
      </DialogActions>
    </Dialog>
  );

  return {
    // param
    show,

    // Element
    element,
    // function

    open,
    close,
    setShow,
  };
}