import { a as __rest, _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useMediaQuery from '@mui/material/useMediaQuery';
import { styled, useTheme } from '@mui/material/styles';
import MuiBox from '@mui/material/Box';
import MuiFade from '@mui/material/Fade';
import MuiModal from '@mui/material/Modal';
import Backdrop from '@mui/material/Backdrop';
import Container from './Container.js';
import IconButton from './IconButton.js';
import boxShadow from '../theme/boxShadow.js';
import '@mui/material/IconButton';
import './Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';

var sizeMap = {
    xs: 440,
    sm: 590,
    md: 700,
    safeArea: "100%",
    fullScreen: "100%"
};
var SizeLevel;
(function (SizeLevel) {
    SizeLevel[SizeLevel["Regular"] = 0] = "Regular";
    SizeLevel[SizeLevel["Large"] = 1] = "Large";
})(SizeLevel || (SizeLevel = {}));
var sizeLevelMap = {
    xs: SizeLevel.Regular,
    sm: SizeLevel.Regular,
    md: SizeLevel.Regular,
    safeArea: SizeLevel.Large,
    fullScreen: SizeLevel.Large
};
var defaultSize = "md";
var Paper = styled(MuiBox)(function (_a) {
    var _b;
    var theme = _a.theme, size = _a.size;
    return (_b = {
            position: "relative",
            width: sizeMap[size],
            maxWidth: "100%",
            backgroundColor: theme.palette.gray.white,
            boxShadow: boxShadow.lg,
            borderRadius: sizeLevelMap[size] === SizeLevel.Large ? theme.borders.radius.xl1 : theme.borders.radius.sm,
            padding: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 8 : 4)
        },
        _b[theme.breakpoints.down("sm")] = {
            padding: theme.spacing(2),
            width: "calc(100vw - ".concat(theme.spacing(2), ")"),
            maxHeight: "calc(100vh - ".concat(theme.spacing(8), ")"),
            bottom: theme.spacing(1)
        },
        _b);
});
var CloseButton = styled(MuiBox)(function (_a) {
    var _b;
    var theme = _a.theme, size = _a.size;
    return (_b = {
            position: "absolute",
            top: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1),
            right: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1)
        },
        _b[theme.breakpoints.down("sm")] = {
            top: theme.spacing(1),
            right: theme.spacing(1)
        },
        _b);
});
var StyledModal = styled(MuiModal)(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        },
        _b[theme.breakpoints.down("sm")] = {
            alignItems: "flex-end",
            width: "100vw"
        },
        _b);
});
var Fade = styled(MuiFade)({
    // We disable the focus ring for mouse, touch and keyboard users.
    // At some point, it would be better to keep it for keyboard users.
    // :focus-ring CSS pseudo-class will help.
    outline: "none !important"
});
var Content = styled(MuiBox)(function (_a) {
    var theme = _a.theme, $scrollable = _a.$scrollable;
    return ({
        overflow: $scrollable ? "auto" : "unset",
        maxHeight: "calc(100vh - ".concat(theme.spacing(10), ")")
    });
});
var BoxWrapper = function (_a) {
    var _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.closeButton, closeButton = _c === void 0 ? false : _c, _d = _a.scrollable, scrollable = _d === void 0 ? false : _d, onClose = _a.onClose, children = _a.children;
    var theme = useTheme();
    var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    var ModalContent = function () { return (jsxs(Paper, __assign({ size: size }, { children: [closeButton && (jsx(CloseButton, __assign({ size: size }, { children: jsx(IconButton, { iconProps: {
                        iconKey: typeof closeButton !== "string" ? "closeCircle" : closeButton,
                        size: sizeLevelMap[size] === SizeLevel.Large && !isMobile ? "md" : "sm",
                        color: "secondary"
                    }, onClick: function (event) {
                        if (onClose)
                            onClose(event, "escapeKeyDown");
                    } }, void 0) }), void 0)), jsx(Content, __assign({ "$scrollable": scrollable }, { children: children }), void 0)] }), void 0)); };
    if (size !== "safeArea")
        return jsx(ModalContent, {}, void 0);
    return (jsx(Container, { children: jsx(ModalContent, {}, void 0) }, void 0));
};
var Modal = function (_a) {
    var open = _a.open, onClose = _a.onClose, titleId = _a.titleId, descriptionId = _a.descriptionId, _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, transparentBackdrop = _a.transparentBackdrop, props = __rest(_a, ["open", "onClose", "titleId", "descriptionId", "size", "scrollable", "transparentBackdrop"]);
    var handleClose = function (event, reason) {
        if (onClose)
            onClose(event, reason);
    };
    var backdrop = transparentBackdrop ? { sx: { background: "transparent" } } : undefined;
    return (jsx(StyledModal, __assign({ "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : undefined, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : undefined, open: open, onClose: handleClose, closeAfterTransition: true, BackdropComponent: Backdrop, BackdropProps: __assign({ timeout: 500 }, backdrop) }, { children: jsx(Fade, __assign({ in: open }, { children: jsx("div", { children: jsx(BoxWrapper, __assign({ size: size, scrollable: scrollable, onClose: handleClose }, props), void 0) }, void 0) }), void 0) }), void 0));
};

export { Modal as default };
