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 AppModalRemove({ title, subtitle, onClose, onConfirm, disableClose, disableEscapeClose, }) {
    const { t } = useTranslation('common');
    useEffect(() => {
        if (disableEscapeClose)
            return;
        return attachCloseToEscape(onClose);
    }, [onClose, disableEscapeClose]);
    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event) => {
            stopEventPropagation(event);
            if (disableClose)
                return;
            onClose();
        }, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "delete", 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: [_jsx(Button, { onClick: (e) => {
                                stopEventPropagation(e);
                                onClose();
                            }, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
}
export const modalRemoveStyle = {
    position: 'absolute',
    top: '40%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '30%',
    maxWidth: '580px',
    borderRadius: 'var(--radius-200)',
    boxShadow: 24,
    bgcolor: 'var(--background-default)',
};
