import { Button, DialogContent, DialogTitle, IconButton } from "@mui/material";
import { CloseOutlined } from "@mui/icons-material";
import styles from "./index.module.css";
import { ReactElement } from "react";

export interface DrawerContainerProps {
  width?: number | string;
  height?: number | string;
  className?: string;
  style?: React.CSSProperties;
  title?: string | ReactElement;
  children?: React.ReactElement | React.ReactElement[] | string;
  footer?: React.ReactElement | null | boolean;
  cancelBtnText?: string | React.ReactElement;
  confirmBtnText?: string | React.ReactElement;
  cancelBtnProps?: React.ComponentProps<typeof Button>;
  confirmBtnProps?: React.ComponentProps<typeof Button>;
  onCancel?: () => void;
  onConfirm?: () => void;
}

export default function DrawerContainer({
  title,
  children,
  width,
  height,
  style,
  footer = true,
  cancelBtnProps,
  confirmBtnProps,
  cancelBtnText = "取消",
  confirmBtnText = "确定",
  onCancel,
  onConfirm,
}: DrawerContainerProps) {
  const footerComponent = footer ? (
    <div className={styles.footer}>
      <Button
        variant="outlined"
        className={styles.operateBtn}
        onClick={onCancel}
        {...cancelBtnProps}
      >
        {cancelBtnText}
      </Button>
      <Button
        variant="contained"
        className={styles.operateBtn}
        onClick={onConfirm}
        {...confirmBtnProps}
      >
        {confirmBtnText}
      </Button>
    </div>
  ) : null;

  return (
    <div className={styles.container} style={{ width, height, ...style }}>
      <div className={styles.header}>
        <DialogTitle>{title}</DialogTitle>
        <IconButton onClick={onCancel}>
          <CloseOutlined></CloseOutlined>
        </IconButton>
      </div>
      <div className={styles.content}>
        <DialogContent>{children}</DialogContent>
      </div>
      {footerComponent}
    </div>
  );
}
