import { AddItem, Box, Divider, SidePanel } from '@wix/design-system';
import React, { useEffect } from 'react';
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 { ScrollableContent } from '../ScrollableContent';
import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
import { useSchemaContext } from '../../providers/SchemaContext';
import { useSidePanelFieldActions } from './useSidePanelFieldActions';
export function _CustomColumnsPanel({ state, }) {
    const entered = useRafRender();
    const { translate: t } = useWixPatternsContainer();
    const { dragAndDrop, collectionDataExtension } = state;
    const schemaCtx = useSchemaContext();
    const isSchema = !!schemaCtx?.schema;
    const isEditable = !!collectionDataExtension || isSchema;
    const { fieldActionsByColumn, fieldActionsModal } = useSidePanelFieldActions(isEditable ? state.columnsCollection.result.items : [], schemaCtx?.schema?.fieldActions, schemaCtx?.schema?.refresh);
    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;
    const titleKey = isEditable
        ? 'cairo.table.manage-fields.title'
        : 'cairo.table.custom-columns.title';
    const subtitleKey = isEditable
        ? dragAndDrop
            ? 'cairo.table.manage-fields.dragAndDrop.subtitle'
            : 'cairo.table.manage-fields.subtitle'
        : dragAndDrop
            ? 'cairo.table.custom-columns.dragAndDrop.subtitle'
            : 'cairo.table.custom-columns.subtitle';
    return (React.createElement(React.Fragment, null,
        React.createElement(PatternsSidePanel, { dataHook: "custom-columns-panel", width: "100%", onClose: () => state.onClose() },
            React.createElement(SidePanel.Header, { title: t(titleKey), subtitle: t(subtitleKey) }, 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: () => state.onClose(), dataHook: "custom-columns" })),
                React.createElement(ColumnsList, { state: state, fieldActions: fieldActionsByColumn })))),
            collectionDataExtension?.DataExtension
                ?.CustomColumnsAddCustomFieldCTAButton && (React.createElement(collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton, null)),
            schemaCtx?.addField && (React.createElement(Box, { direction: "vertical", width: "100%" },
                React.createElement(Divider, { direction: "horizontal" }),
                React.createElement(Box, { padding: "SP4", width: "100%", boxSizing: "border-box", direction: "vertical" },
                    React.createElement(AddItem, { dataHook: "custom-columns-schema-add-field", onClick: schemaCtx.addField }, t('cairo.customFields.addCustomField.CTA')))))),
        fieldActionsModal));
}
export const CustomColumnsPanel = observer(_CustomColumnsPanel);
//# sourceMappingURL=CustomColumnsPanel.js.map