import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Modal } from '@mui/material';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Icon } from '../../basic';
import './style.scss';
import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, confirmDisabled, disableClose, disableEscapeClose, disableBackdropClose, }) {
    const { t } = useTranslation('common');
    useEffect(() => {
        if (!onClose || disableEscapeClose)
            return;
        return attachCloseToEscape(onClose);
    }, [onClose, disableEscapeClose]);
    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !onClose || !!disableEscapeClose, onClose: (event, reason) => {
            stopEventPropagation(event);
            if (!onClose || disableClose)
                return;
            if (disableBackdropClose && reason === 'backdropClick')
                return;
            onClose();
        }, children: _jsxs(Box, { className: "modal-container modal-confirm", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [onClose && (_jsx(Button, { onClick: (e) => {
                                stopEventPropagation(e);
                                onClose();
                            }, text: closeLabel || t('button.cancel'), mode: "tonal" })), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('button.confirm'), disabled: confirmDisabled })] })] }) }));
}
const style = {
    position: 'absolute',
    top: '40%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '30%',
    maxWidth: '580px',
    borderRadius: 'var(--radius-200)',
    boxShadow: 24,
    bgcolor: 'var(--background-default)',
};
