import { Card, LiveRegion } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { CollectionProvider } from '../CollectionContext';
import { MessageActionModal } from '../ActionModal';
import { ToolbarCollectionProvider } from '../ToolbarCollectionContext';
import { NavigationModal } from '../NavigationModal';
import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
import { usePageContext } from '../../providers';
import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
import { classes, st } from '../common.st.css.js';
import { ErrorState } from '../ErrorState';
import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
function _CollectionCard({ state, errorState, children, tags, ...rest }) {
    const page = usePageContext();
    const { isPanelLayout, useRelativeSidePanel } = useWixPatternsContainer();
    const { modalsContainerRef, stackingRootRef } = page;
    const { collection, initTask, bulk, AddApplyFiltersButton, collectionDataExtension, tagsCollectionState, } = state;
    const { modals } = bulk;
    const { actionModal } = modals;
    const { status: initTaskStatus } = initTask;
    let child;
    if (initTaskStatus.isError && errorState !== false) {
        child = (React.createElement(ErrorState, { errorStatus: initTaskStatus, errorState: errorState, dataHook: "collection-card-error-state", state: state }));
    }
    else {
        child = children;
        child = (React.createElement(React.Fragment, null,
            child,
            actionModal.value && (React.createElement(MessageActionModal, { state: actionModal, ...actionModal.value }))));
    }
    return (React.createElement(ToolbarCollectionProvider, { value: state },
        React.createElement(MultiCollectionSupportProvider, { value: state.multi },
            React.createElement(Card, { className: st(classes.column, classes.fullHeight), ...rest },
                React.createElement(CollectionProvider, { value: collection }, child)),
            React.createElement(NavigationModal, null),
            collectionDataExtension?.dataExtension && (React.createElement(React.Fragment, null,
                React.createElement(collectionDataExtension.DataExtension.CustomFieldModal, { state: collectionDataExtension.customFieldsPanel.customFieldModal }),
                React.createElement(collectionDataExtension.DataExtension.ArchiveFieldModal, { state: collectionDataExtension.customFieldsPanel.archiveFieldModal }),
                collectionDataExtension.dataExtension.deleteFieldModal && (React.createElement(DeleteFieldModal, { state: collectionDataExtension.dataExtension.deleteFieldModal })))),
            React.createElement(CollectionProvider, { value: collection }, tags),
            tagsCollectionState && React.createElement(tagsCollectionState.components.ManageModal, null),
            AddApplyFiltersButton?.DiscardChangesModal && (React.createElement(AddApplyFiltersButton.DiscardChangesModal, null)),
            React.createElement(LiveRegion, { dataHook: "collection-live-region", ref: (ref) => {
                    state.liveRegionRef.current = ref;
                } }),
            isPanelLayout ? (React.createElement(WixPatternsPanelModalsContainer, { state: state.panels })) : (React.createElement(WixPatternsModalsContainer, { rootRef: stackingRootRef, anchorRef: useRelativeSidePanel ? stackingRootRef : modalsContainerRef, state: state.panels })))));
}
export const CollectionCard = observer(_CollectionCard);
//# sourceMappingURL=CollectionCard.js.map