import { observer } from 'mobx-react-lite';
import React, { useCallback, useEffect } from 'react';
import { Box } from '@wix/design-system';
import { addEventListener } from '@wix/bex-core/util';
import { ColumnListTableListItem } from './ColumnListTableListItem';
function _ColumnsList(props) {
    const { state } = props;
    const { columnsCollection, dragAndDrop } = state;
    const hasSearchValue = state.searchValue.trim().length > 0;
    useEffect(() => {
        if (dragAndDrop == null) {
            return;
        }
        const { table: { sidePanel }, } = state;
        const disposers = [
            addEventListener(sidePanel.transition.events, 'entered', () => {
                dragAndDrop.listRect._syncThrottled();
            }),
            dragAndDrop.listRect.init(),
        ];
        return () => {
            disposers.forEach((d) => d?.());
        };
    }, []);
    const renderItem = useCallback((column, index, { length }) => {
        const itemContent = (React.createElement(ColumnListTableListItem, { key: column.id, index: index, state: state, column: column, showDivider: index < length - 1 }));
        if (dragAndDrop && !hasSearchValue) {
            const { DraggableListItem } = dragAndDrop.components;
            return (React.createElement(DraggableListItem, { key: column.id, dndDisabled: column.reorderDisabled, id: column.id, index: index, state: dragAndDrop }, itemContent));
        }
        return itemContent;
    }, [hasSearchValue]);
    let child = (React.createElement(Box, { direction: "vertical", dataHook: "custom-columns-list", backgroundColor: "D60" }, columnsCollection.result.items.map(renderItem)));
    if (dragAndDrop && !hasSearchValue) {
        const { ListDragAndDropContext, DraggableListItemOverlay } = dragAndDrop.components;
        child = (React.createElement(ListDragAndDropContext, { state: dragAndDrop, onSubmit: async ({ from, over }) => {
                state.customizeColumnsInSidePanelBi({ actionName: 'reorder' });
                state.dragAndDrop?._onCustomColumnsReorder(from.item.id, over.item.id);
            } },
            React.createElement(React.Fragment, null,
                child,
                React.createElement(DraggableListItemOverlay, { state: dragAndDrop, renderItem: (index) => {
                        const item = columnsCollection.result.items[index];
                        return item ? renderItem(item, index, { length: 0 }) : null;
                    } }))));
    }
    return child;
}
export const ColumnsList = observer(_ColumnsList);
//# sourceMappingURL=ColumnsList.js.map