import React, { useEffect, useState } from 'react';
import { ModalState } from '@wix/bex-core';
import { Button, Drawer, Modal } from '@wix/design-system';
import { DownloadImport } from '@wix/wix-ui-icons-common';
import { observer, Observer } from 'mobx-react-lite';
import { ImportButtonModalLayout } from './ImportButtonModalLayout';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
import { useIsMobile } from '../../hooks/useIsMobile';
function _ImportButton(props) {
    const { toolbarType = 'default', fields, bulkUploadItems, backup, batchSize, } = props;
    const table = useToolbarCollectionContext();
    const { toolbar: { responsive }, } = table;
    const { translate: t } = useWixPatternsContainer();
    const [state] = useState(() => (table.importState ??= new ModalState()));
    const isMobile = useIsMobile();
    useEffect(() => {
        table.featuredComponents.importModal.set(React.createElement(Observer, null, () => {
            const child = (React.createElement(ImportButtonModalLayout, { importModalState: state, fields: fields, bulkUploadItems: bulkUploadItems, backup: backup, batchSize: batchSize }));
            if (isMobile) {
                return (React.createElement(Drawer, { dataHook: "import-modal", open: state.isOpen, onClose: state.requestClose }, child));
            }
            return (React.createElement(Modal, { onRequestClose: state.requestClose, isOpen: state.isOpen, dataHook: "import-modal" }, child));
        }));
        return () => {
            table.featuredComponents.importModal.set(null);
        };
    }, []);
    return (React.createElement("div", { "data-hook": "import-container" }, toolbarType === 'default' ? (React.createElement(ResponsiveButton, { state: responsive.actions, dataHook: "import-button", onClick: state.open, icon: React.createElement(DownloadImport, null) }, t('cairo.import.import'))) : (React.createElement(Button, { skin: "standard", priority: "secondary", size: "small", ellipsis: true, prefixIcon: React.createElement(DownloadImport, null), dataHook: "import-button", onClick: state.open }, t('cairo.import.import')))));
}
export const ImportButton = observer(_ImportButton);
//# sourceMappingURL=ImportButton.js.map