import CloseIcon from '../../../../../node_modules/@mui/icons-material/esm/Close.mjs';
import React__default, { useState } from 'react';
import { useUniqueId } from '../../utils/uniqueId.mjs';
import { Button } from './Button.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Typography } from './Typography.mjs';
import '../shared/components/Toast.mjs';
import useMediaQuery from '../../../../../node_modules/@mui/material/useMediaQuery/index.mjs';
import Dialog from '../../../../../node_modules/@mui/material/Dialog/Dialog.mjs';
import DialogTitle from '../../../../../node_modules/@mui/material/DialogTitle/DialogTitle.mjs';
import DialogContent from '../../../../../node_modules/@mui/material/DialogContent/DialogContent.mjs';
import DialogActions from '../../../../../node_modules/@mui/material/DialogActions/DialogActions.mjs';
import CircularProgress from '../../../../../node_modules/@mui/material/CircularProgress/CircularProgress.mjs';
import styled from '../../../../../node_modules/@mui/material/styles/styled.mjs';
import IconButton from '../../../../../node_modules/@mui/material/IconButton/IconButton.mjs';

const useAsyncState = useState;
const CloseButton = styled(IconButton)(({ theme })=>({
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1)
    }));
const Modal = ({ cancelButtonText, children, description, confirmButtonText, disableConfirm, warning, close, confirm, title, showLoadingOnConfirm, noCancelButton, isOpen, keepOpenOnConfirm })=>{
    const [confirming, setConfirming] = useAsyncState(false);
    const isXsScreen = useMediaQuery((theme)=>theme.breakpoints.down('xs'));
    const descriptionId = useUniqueId('confirmation-modal-description');
    const titleId = useUniqueId('confirmation-modal-title');
    const handleConfirm = async (e)=>{
        e.preventDefault();
        setConfirming(true);
        try {
            return await confirm();
        } finally{
            setConfirming(false);
            if (!keepOpenOnConfirm) {
                close();
            }
        }
    };
    const onClose = ()=>{
        close();
    };
    const confirmDisabled = confirming || disableConfirm;
    return /*#__PURE__*/ React__default.createElement(Dialog, {
        "aria-describedby": descriptionId,
        "aria-labelledby": titleId,
        fullScreen: isXsScreen,
        onClose: onClose,
        open: isOpen
    }, isXsScreen && !noCancelButton && /*#__PURE__*/ React__default.createElement(CloseButton, {
        onClick: onClose,
        size: "large"
    }, /*#__PURE__*/ React__default.createElement(CloseIcon, {
        fontSize: "small"
    })), /*#__PURE__*/ React__default.createElement(DialogTitle, {
        id: titleId
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h2"
    }, title)), /*#__PURE__*/ React__default.createElement("form", {
        onSubmit: handleConfirm
    }, /*#__PURE__*/ React__default.createElement(DialogContent, null, description && /*#__PURE__*/ React__default.createElement(Typography, null, description), children && /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column"
    }, children)), /*#__PURE__*/ React__default.createElement(DialogActions, null, !noCancelButton && /*#__PURE__*/ React__default.createElement(Button, {
        autoFocus: warning,
        disabled: confirming,
        onClick: onClose,
        variant: "ghost",
        compact: true
    }, cancelButtonText ?? `Cancel`), /*#__PURE__*/ React__default.createElement(Button, {
        autoFocus: !warning,
        disabled: confirmDisabled,
        type: "submit",
        variant: "primary",
        warning: warning,
        compact: true
    }, confirming && showLoadingOnConfirm ? /*#__PURE__*/ React__default.createElement(CircularProgress, {
        size: 18
    }) : confirmButtonText ?? 'Ok'))));
};

export { Modal };
//# sourceMappingURL=Modal.mjs.map
