import { Backdrop, IconButton, Modal as MuiModal } from "@mui/material";
import { styled } from "@mui/material/styles";
import { ReactElement, useState } from "react";

import GhostStyledIcon from "../Icon/GhostIcon";
import Paper from "../Paper/Paper";
import CloseIcon from '@mui/icons-material/Close';

const PREFIX = "Modal";

const classes = {
    paper: `${PREFIX}-paper`,
    backdrop: `${PREFIX}-backdrop`,
};

const StyledMuiModal = styled(MuiModal, {
    shouldForwardProp: prop => prop !== "minHeight" && prop !== "maxWidth",
})(({ theme, minHeight, maxWidth }) => ({
    [`& .${classes.paper}.Paper-root`]: {
        "& .MuiIconButton-sizeSmall": {
            padding: "0px",
            marginRight: "-9px",
        },
        "& .modalDismiss": {
            marginLeft: "auto",
            display: "flex",
        },
        position: "absolute",
        minHeight: minHeight ? minHeight : "auto",
        [theme.breakpoints.down("md")]: {
            maxWidth: "none",
        },
        [theme.breakpoints.up("sm")]: {
            maxWidth: maxWidth ? maxWidth : "auto",
        },
    },

    [`& .${classes.backdrop}`]: {
        "&::before": {
            "@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
                content: '""',
                background:
                theme.palette.mode === "light"
                ? `linear-gradient(180deg, #AFCDE9 1%, #F7FBE7 100%)`
                : `linear-gradient(180deg, rgba(8, 15, 53, 0), rgba(0, 0, 10, 0.9)), linear-gradient(333deg, rgba(153, 207, 255, 0.2), rgba(180, 255, 217, 0.08)), radial-gradient(circle at 77% 89%, rgba(125, 163, 169, 0.8), rgba(125, 163, 169, 0) 50%), radial-gradient(circle at 15% 95%, rgba(125, 163, 169, 0.8), rgba(125, 163, 169, 0) 43%), radial-gradient(circle at 65% 23%, rgba(137, 151, 119, 0.4), rgba(137, 151, 119, 0) 70%), radial-gradient(circle at 10% 0%, rgba(187, 211, 204, 0.33), rgba(187,211,204,0) 35%), radial-gradient(circle at 11% 100%, rgba(131, 165, 203, 0.3), rgba(131, 165, 203, 0) 30%)`,
                opacity: "1",
                filter: "blur(333px)",
                height: "100%",
                width: "100%",
                backgroundColor: theme.palette.background.default,
            },
        },
        "@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
            background: "hsla(0,0%,39.2%,.9)",
        },
        background: "hsla(0,0%,39.2%,.1)",
        backdropFilter: "blur(33px)",
        "--webkitBackdropFilter": "blur(33px)",
    },
}));

function getModalStyle() {
    const top = 50;
    const left = 50;

    return {
        top: `${top}%`,
        left: `${left}%`,
        transform: `translate(-${top}%, -${left}%)`,
    };
}

const Modal = ({
    open = false,
    minHeight = "605px",
    maxWidth = "750px",
    closePosition = "right",
    headerText,
    headerContent,
    topRight,
    topLeft,
    ...props
}) => {
    // getModalStyle is not a pure function, we roll the style only on the first render
    const [modalStyle] = useState(getModalStyle);
    const closeButton = (
        <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={e => {
                if (props.onClose) {
                    props.onClose(e, "escapeKeyDown");
                }
            }}
            >
            <GhostStyledIcon component={CloseIcon} />
        </IconButton>
    );

    //modal must have a close position. Close position and topLeft or topRight cant be used for the same position.
    const topRightPos = closePosition === "right" ? closeButton : topRight;
    const topLeftPos = closePosition === "left" ? closeButton : topLeft;

    return (
        <StyledMuiModal
            open={open}
            className={props.className}
            aria-labelledby="modal-title"
            aria-describedby="modal-description"
            BackdropComponent={Backdrop}
            BackdropProps={{ className: classes.backdrop }}
            {...props}
            minHeight={minHeight}
            maxWidth={maxWidth}
            >
            <Paper
                style={modalStyle}
                className={classes.paper}
                headerText={headerText}
                topRight={topRightPos}
                topLeft={topLeftPos}
                zoom={false}
                headerContent={headerContent}
            >
                {props.children}
            </Paper>
        </StyledMuiModal>
    );
};

export default Modal;