import { TableListItem, Text, IconButton, Box, } from '@wix/design-system';
import React, { useMemo, useCallback, lazy, Suspense, } from 'react';
import { Archive, ChevronRight } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
// Lazy load the ArchivedItemsPanel - only loads when panel is opened
const ArchivedItemsPanel = lazy(() => import('./ArchivedItemsPanel').then((module) => ({
    default: module.ArchivedItemsPanel,
})));
function _ArchivedItemsCTAButton({ dataExtension, onCloseSidePanel, dataHook = 'custom-columns', actionContainerProps, }) {
    const { translate: t } = useWixPatternsContainer();
    const style = useMemo(() => ({
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
    }), []);
    const handleOpenArchivedPanel = useCallback(() => {
        dataExtension?.openArchivedPanel();
    }, [dataExtension]);
    const handleCloseArchivedPanel = useCallback(() => {
        dataExtension?.closeArchivedPanel();
    }, [dataExtension]);
    const handleCloseAllPanels = useCallback(() => {
        dataExtension?.closeArchivedPanel();
        onCloseSidePanel();
    }, [dataExtension, onCloseSidePanel]);
    return (React.createElement(React.Fragment, null,
        React.createElement(TableListItem, { onClick: handleOpenArchivedPanel, dataHook: `${dataHook}-archived-items-button`, showDivider: true, verticalPadding: "tiny", options: [
                {
                    value: (React.createElement("div", { style: style },
                        React.createElement(Archive, null),
                        React.createElement(Text, { size: "small", weight: "thin" }, t('cairo.table.custom-columns.section-divider')))),
                },
                {
                    value: (React.createElement(Box, { ...actionContainerProps },
                        React.createElement(IconButton, { size: "tiny", skin: "light" },
                            React.createElement(ChevronRight, null)))),
                    align: 'right',
                },
            ] }),
        dataExtension?.isArchivedPanelOpen && (React.createElement(Suspense, { fallback: null },
            React.createElement(ArchivedItemsPanel, { dataExtension: dataExtension, items: dataExtension?.archivedItems, onBackButtonClick: handleCloseArchivedPanel, onCloseButtonClick: handleCloseAllPanels, dataHook: dataHook })))));
}
export const ArchivedItemsCTAButton = observer(_ArchivedItemsCTAButton);
//# sourceMappingURL=ArchivedItemsCTAButton.js.map