import { Box, SidePanel } from '@wix/design-system';
import React, { useEffect } from 'react';
import { withoutDefaults } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { ColumnsList } from './ColumnsList';
import { CustomColumnsSearch } from './CustomColumnsSearch';
import { CustomColumnsNoResults } from './CustomColumnsNoResults';
import { useRafRender } from '../../hooks/useRafRender';
import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
import { ScrollableContent } from '../ScrollableContent';
import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
export function _CustomColumnsPanel({ state, }) {
    const entered = useRafRender();
    const { translate: t } = useWixPatternsContainer();
    const { table, dragAndDrop } = state;
    const { sidePanel, collectionDataExtension } = table;
    useEffect(() => state.init(), []);
    if (!entered) {
        return null;
    }
    const hasSearchResults = state.columnsCollection.result.items.length > 0;
    const hasSearchValue = state.searchValue.trim().length > 0;
    const totalColumns = state.orderedColumns.length;
    const isUsingDataExtension = !!collectionDataExtension;
    // Show search if they're using DEx OR if there are more than 5 columns
    const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
    return (React.createElement(PatternsSidePanel, { dataHook: "custom-columns-panel", width: "100%", onClose: () => {
            table.reportBi(withoutDefaults(cairoFiltersPanelUsed)({
                isOpened: false,
                feature: 'Custom Columns',
                origin: 'X Button',
            }));
            sidePanel.close();
        } },
        React.createElement(SidePanel.Header, { title: t('cairo.table.custom-columns.title'), subtitle: dragAndDrop
                ? t('cairo.table.custom-columns.dragAndDrop.subtitle')
                : t('cairo.table.custom-columns.subtitle') }, shouldShowSearch && (React.createElement(Box, { padding: "0 SP3 SP2 SP3" },
            React.createElement(CustomColumnsSearch, { state: state })))),
        React.createElement(ScrollableContent, { overflowY: true, dataHook: "custom-columns-panel-scroll-container", ref: (e) => {
                if (state.dragAndDrop) {
                    state.dragAndDrop.listRect.element = e;
                }
            } }, hasSearchValue && !hasSearchResults ? (React.createElement(CustomColumnsNoResults, { state: state })) : (React.createElement(React.Fragment, null,
            collectionDataExtension?.dataExtension?.shouldDisplayArchive &&
                collectionDataExtension?.DataExtension
                    ?.CustomColumnsArchivedItemsCTAButton && (React.createElement(collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton, { dataExtension: collectionDataExtension.dataExtension, onCloseSidePanel: () => sidePanel.close(), dataHook: "custom-columns", actionContainerProps: { paddingInlineEnd: '12px' } })),
            React.createElement(ColumnsList, { state: state })))),
        collectionDataExtension?.DataExtension
            ?.CustomColumnsAddCustomFieldCTAButton && (React.createElement(collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton, null))));
}
export const CustomColumnsPanel = observer(_CustomColumnsPanel);
//# sourceMappingURL=CustomColumnsPanel.js.map