import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Fade, Modal } from '@mui/material';
import cx from 'classnames';
import { useTranslation } from 'react-i18next';
import { Button, Icon } from '../../basic';
import './style.scss';
import { useEffect } from 'react';
import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableEscapeClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }) {
    const { t } = useTranslation('common');
    const getClassNames = cx('modal-container', className);
    useEffect(() => {
        if (disableEscapeClose)
            return;
        return attachCloseToEscape(close);
    }, [close, disableEscapeClose]);
    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event, reason) => {
            stopEventPropagation(event);
            if (disableBackdropClose && reason === 'backdropClick')
                return;
            if (disableClose)
                return;
            close();
        }, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: (e) => {
                                    stopEventPropagation(e);
                                    close();
                                }, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [alternativeOptions && alternativeOptions, alternativeButton && (_jsx(Button, { className: "alternative", color: "white", onClick: alternativeButton.action, text: alternativeButton.title })), !disableCancel && (_jsx(Button, { onClick: (e) => {
                                    stopEventPropagation(e);
                                    (cancel || close)();
                                }, text: closeLabel || t('button.cancel'), mode: "tonal" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
}
const style = {
    position: 'absolute',
    top: '40%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '50%',
    maxWidth: '1080px',
    borderRadius: 'var(--radius-200)',
    boxShadow: 24,
    bgcolor: 'var(--background-default)',
};
