import { Box, Button, CustomModalLayout, Heading, ModalMobileLayout, Text, } from '@wix/design-system';
import { getImportModalStepProps } from './getImportModalStepProps';
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useCreateImport } from '@wix/bex-core';
import { addEventListener } from '@wix/bex-core/util';
import { useIsMobile } from '../../hooks/useIsMobile';
import { CustomDrawerLayout } from '../CustomDrawerLayout';
import { ImportStepper } from './ImportStepper';
import { MessageActionModal } from '../ActionModal';
import { ModalWrapper } from '../CollectionModal';
function _ImportButtonModalLayout(props) {
    const { fields, bulkUploadItems, backup, batchSize, importModalState, ...rest } = props;
    const isMobile = useIsMobile();
    const createImport = useCreateImport({
        fields,
        bulkUploadItems,
        backup,
        batchSize,
        importModalState,
    });
    const [state] = useState(() => createImport());
    const { onRequestClose, children, removeContentPadding, ...customModalLayoutProps } = getImportModalStepProps({
        state,
        isMobile,
    });
    const wrappedChildren = state.currentStep !== 'progress' ? (React.createElement(Box, { direction: "vertical", gap: "SP3", width: "100%", height: "100%" },
        React.createElement(ImportStepper, { state: state, removeContentPadding: !removeContentPadding }),
        children)) : (children);
    useEffect(() => {
        if (onRequestClose) {
            return addEventListener(importModalState.events, 'requestClose', onRequestClose);
        }
        return undefined;
    }, [onRequestClose]);
    useEffect(() => state.init(), []);
    const t = state.translate;
    const { modal: discardModal } = state.discardChangesModal;
    if (isMobile) {
        return (React.createElement(React.Fragment, null,
            React.createElement(CustomDrawerLayout, { dataHook: "import-modal-layout", removeContentPadding: removeContentPadding, ...rest, ...customModalLayoutProps, children: wrappedChildren }),
            React.createElement(ModalWrapper, { state: discardModal, onAfterClose: () => state.discardChangesModal.afterClose() },
                React.createElement(ModalMobileLayout, { dataHook: "import-discard-changes-modal", title: React.createElement(Heading, { size: "small" }, t('cairo.import.discardChanges.title')), content: React.createElement(Text, null, t('cairo.import.discardChanges.description')), onCloseButtonClick: () => discardModal.close(), stickyFooter: true, footer: React.createElement(Box, { direction: "vertical", gap: "SP3" },
                        React.createElement(Button, { dataHook: "import-discard-confirm", fullWidth: true, skin: "destructive", onClick: () => discardModal.confirm() }, t('cairo.import.discardChanges.confirm')),
                        React.createElement(Button, { dataHook: "import-discard-cancel", fullWidth: true, priority: "secondary", onClick: () => discardModal.decline() }, t('cairo.import.discardChanges.cancel'))) }))));
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(CustomModalLayout, { width: "600px", maxHeight: "80vh", dataHook: "import-modal-layout", removeContentPadding: removeContentPadding, ...rest, ...customModalLayoutProps, children: wrappedChildren }),
        React.createElement(MessageActionModal, { dataHook: "import-discard-changes-modal", state: state.discardChangesModal, title: t('cairo.import.discardChanges.title'), content: t('cairo.import.discardChanges.description'), primaryButtonText: t('cairo.import.discardChanges.confirm'), secondaryButtonText: t('cairo.import.discardChanges.cancel'), theme: "destructive" })));
}
export const ImportButtonModalLayout = observer(_ImportButtonModalLayout);
//# sourceMappingURL=ImportButtonModalLayout.js.map