import * as React from "react";
import Box from "@mui/material/Box";
import ModalBox from "@mui/material/Modal";
import { useDispatch, useSelector } from "react-redux";
import { CLOSE_MODAL } from "../../lib/redux/slices/appSlice";
import { Typography } from "@mui/material";
import { SPACING } from "../../data/spacing";
import CancelIcon from "@mui/icons-material/Cancel";
const isMobile = window.innerWidth <= 600;

export const Modal = () => {
  const { modalState, modalContent, modalTitle, modalOnClose, modalSize } =
    useSelector((state) => state.appSlice.modal);

  const size = modalSize || 500;
  const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: isMobile ? "90%" : size,
    bgcolor: "background.paper",
    // border: "2px solid #000",
    boxShadow: 24,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    gap: SPACING.SMALL,
    borderRadius: 2,
    p: 2,
  };

  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(CLOSE_MODAL());
  }, []);

  const handleClose = () => {
    dispatch(CLOSE_MODAL());
    if (modalOnClose) {
      modalOnClose();
    }
  };

  const successModal = (
    <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
      <CancelIcon
        fontSize="medium"
        sx={{ cursor: "pointer", float: "left", position: "absolute" }}
        onClick={handleClose}
      />
      <Typography
        sx={{
          display: "inline-block",
          mt: "6px",
          fontWeight: "bold",
          textAlign: "center",
          width: "100%",
          color: (theme) => theme.palette.success.main,
        }}
      >
        عملیات با موفقیت انجام شد!
      </Typography>
    </Box>
  );
  const errorModal = (
    <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
      <CancelIcon
        fontSize="medium"
        sx={{ cursor: "pointer", float: "left", position: "absolute" }}
        onClick={handleClose}
      />
      <Typography
        sx={{
          display: "inline-block",
          mt: "5px",
          fontWeight: "bold",
          textAlign: "center",
          width: "100%",
          color: (theme) => theme.palette.error.main,
        }}
      >
        مشکلی پیش آمده است!
      </Typography>
    </Box>
  );

  return (
    <ModalBox
      open={modalState}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        {modalTitle === "success" && successModal}
        {modalTitle === "error" && errorModal}
        {modalTitle !== "success" && modalTitle !== "error" && (
          <>
            <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
              <CancelIcon
                fontSize="medium"
                sx={{ cursor: "pointer", float: "left", position: "absolute" }}
                onClick={handleClose}
              />
              <Typography
                sx={{
                  display: "inline-block",
                  mt: "5px",
                  fontWeight: "bold",
                  textAlign: "center",
                  width: "100%",
                }}
              >
                {modalTitle}
              </Typography>
            </Box>
            {modalContent}
          </>
        )}
      </Box>
    </ModalBox>
  );
};
