import React, { useEffect, useState } from 'react';
import { ModalState } from '@wix/bex-core';
import { Box, Button, Drawer, Modal } from '@wix/design-system';
import { UploadExport } from '@wix/wix-ui-icons-common';
import { observer, Observer } from 'mobx-react-lite';
import { ExportButtonModalLayout } from './ExportButtonModalLayout';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
import { useIsMobile } from '../../hooks/useIsMobile';
function _ExportButton(props) {
    const { toolbarType = 'default', renderError, transformPlatformizedQuery, differentQueryEndpointThanCollection, customTotal, methodMetadata, arrayFieldDelimiter, methodSpec, fields, saveAs, exportModalFooter, exportModalTitle, onProgressModalTitle, exportToCSVMessage, } = props;
    const table = useToolbarCollectionContext();
    const { toolbar: { responsive }, } = table;
    const { translate: t } = useWixPatternsContainer();
    const [state] = useState(() => (table.exportState ??= new ModalState()));
    const isMobile = useIsMobile();
    useEffect(() => {
        table.featuredComponents.exportModal.set(React.createElement(Observer, null, () => {
            const child = (React.createElement(ExportButtonModalLayout, { exportModalState: state, renderError: renderError, transformPlatformizedQuery: transformPlatformizedQuery, customTotal: customTotal, arrayFieldDelimiter: arrayFieldDelimiter, differentQueryEndpointThanCollection: differentQueryEndpointThanCollection, methodMetadata: methodMetadata, methodSpec: methodSpec, fields: fields, saveAs: saveAs, exportModalFooter: exportModalFooter, exportModalTitle: exportModalTitle, onProgressModalTitle: onProgressModalTitle, exportToCSVMessage: exportToCSVMessage }));
            if (isMobile) {
                return (React.createElement(Drawer, { dataHook: "export-modal", open: state.isOpen, onClose: state.requestClose }, child));
            }
            return (React.createElement(Modal, { onRequestClose: state.requestClose, isOpen: state.isOpen, dataHook: "export-modal" }, child));
        }));
        return () => {
            table.featuredComponents.exportModal.set(null);
        };
    }, []);
    return (React.createElement(Box, { dataHook: "export-container" }, toolbarType === 'default' ? (React.createElement(ResponsiveButton, { state: responsive.actions, dataHook: "export-button", onClick: state.open, icon: React.createElement(UploadExport, null) }, t('cairo.export.export'))) : (React.createElement(Button, { skin: "standard", priority: "secondary", size: "small", ellipsis: true, prefixIcon: React.createElement(UploadExport, null), dataHook: "export-button", onClick: state.open }, t('cairo.export.export')))));
}
export const ExportButton = observer(_ExportButton);
//# sourceMappingURL=ExportButton.js.map