import { CloseRounded } from '@mui/icons-material';
import { LoadingButton } from '@mui/lab';
import {
  Box,
  DialogActions,
  DialogContentText,
  DialogTitle,
  Grid,
  Typography,
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

import Dialog from './Dialog.jsx';
import DialogContent from './DialogContent.jsx';
import { useStyles } from './modalStyle.js';
const CustomModal = ({
  src,
  title,
  subTitle,
  info,
  modalBodyFunction,
  leftButtonTitle,
  rightButtonTitle,
  leftButtonFunctionCall,
  rightButtonFunctionCall,
  rightButtonLoading,
  isScrolling,
  isTitleLeft,
  isTitleLeftWithBackAndCloseButton,
  contentWrapperStyles,
  detailModal,
  contentScroll,
  hideTitle,
  header,
  disableRightButton,
  showCloseButton = true,
  showBack,
  backFunctionCall,
  onClose,
  imageStyle,
  noPadding,
  showFooter,
  footerLeftButtonTitle,
  footerRightButtonTitle,
  footerRightButtonLoading,
  onFooterLeftButtonClick,
  onFooterRightButtonClick,
  customClassForTitle,
}) => {
  const classes = useStyles();

  const dialogContentStyle = noPadding ? { padding: '0px' } : {};

  return (
    <div className={classes.dialogWrapper}>
      <Dialog
        onClose={onClose ?? leftButtonFunctionCall}
        open={true}
        classes={{
          root: isScrolling
            ? classes.dialogScrollingWrapper
            : classes.dialogWrapper,
          paper: detailModal
            ? classes.detailContainerWrapper
            : classes.dialogContainerWrapper,
        }}
        sx={
          isScrolling
            ? {
                '& .MuiDialog-container': {
                  height: 'fit-content',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                },
              }
            : contentScroll
            ? {
                '& .MuiDialog-container': {
                  height: '-webkit-fill-available',
                  width: '100%',
                },
              }
            : {
                '& .MuiDialog-container': {
                  height: 'fit-content',
                },
              }
        }
      >
        {header ? header() : null}
        {!hideTitle && (
          <DialogTitle
            className={
              detailModal
                ? classes.detailTitleWrapper
                : classes.dialogTitleWrapper
            }
          >
            {!detailModal && (backFunctionCall || onClose) && showBack && (
              <ArrowBackIcon
                className={classes?.backIcon}
                onClick={backFunctionCall ?? onClose ?? leftButtonFunctionCall}
              />
            )}
            {!detailModal &&
              (onClose || leftButtonFunctionCall) &&
              showCloseButton && (
                <CloseRounded
                  className={classes?.closeIcon}
                  onClick={onClose ?? leftButtonFunctionCall}
                />
              )}

            <div
              className={
                isTitleLeftWithBackAndCloseButton
                  ? classes.imageContainerTitleLeftAligned
                  : classes.imageContainer
              }
            >
              {src && (
                <img
                  src={src}
                  className={imageStyle ? imageStyle : classes.imageWrapper}
                ></img>
              )}
              <Typography
                className={`${
                  isTitleLeft ? classes.modalTitleLeft : classes.modalTitle
                } ${customClassForTitle}`}
              >
                {title}
              </Typography>
              {subTitle && (
                <Typography
                  className={
                    isTitleLeft
                      ? classes.modalSubTitleLeft
                      : classes.modalSubTitle
                  }
                >
                  {subTitle}
                </Typography>
              )}
            </div>
          </DialogTitle>
        )}
        <DialogContent
          className={
            contentScroll
              ? classes.contentScrollWrapper
              : classes.contentWrapper
          }
          // sx={contentWrapperStyles}
          sx={{ ...contentWrapperStyles, ...dialogContentStyle }}
        >
          <DialogContentText>{info}</DialogContentText>
          {modalBodyFunction ? modalBodyFunction() : null}
        </DialogContent>
        {!showFooter && !detailModal && (
          <div className={classes.actionWrapper}>
            <DialogActions className={classes.actions}>
              {leftButtonTitle && (
                <button
                  variant="contained"
                  className={classes.leftButton}
                  onClick={leftButtonFunctionCall}
                >
                  <span className={classes.leftButtonText}>
                    {leftButtonTitle}
                  </span>
                </button>
              )}
              {rightButtonTitle && (
                <LoadingButton
                  variant="contained"
                  className={classes.rightButton}
                  onClick={rightButtonFunctionCall}
                  type="submit"
                  loading={rightButtonLoading}
                  disabled={disableRightButton === true ? true : false}
                >
                  <span className={classes.rightButtonText}>
                    {rightButtonTitle}
                  </span>
                </LoadingButton>
              )}
            </DialogActions>
          </div>
        )}

        {showFooter && (
          <Box className={classes.footerMainDiv}>
            <Grid container className={classes.modalFooter}>
              <Grid item className={classes.cancelButton} lg={3}>
                <LoadingButton
                  size="small"
                  variant="contained"
                  color="secondary"
                  onClick={onFooterLeftButtonClick}
                >
                  {footerLeftButtonTitle}
                </LoadingButton>
              </Grid>
              <Grid item className={classes.nextButton} lg={3}>
                <LoadingButton
                  size="small"
                  variant="contained"
                  loading={footerRightButtonLoading}
                  onClick={onFooterRightButtonClick}
                >
                  {footerRightButtonTitle}
                </LoadingButton>
              </Grid>
            </Grid>
          </Box>
        )}
      </Dialog>
    </div>
  );
};

export default CustomModal;
