import { CollectionOptimisticActions } from '@wix/bex-core';
import { arrayMove } from '@wix/wix-style-react-incubator/dnd-kit/sortable';
import { addEventListener } from '@wix/bex-core/util';
import { CollectionDragAndDropState } from '../components/DragAndDrop';
import { action, computed, makeObservable } from 'mobx';
import { RectState } from './RectState';
import { indexOfCompareFn } from './indexOfCompareFn';
export class CustomColumnsDragAndDropState {
    get _dnd() {
        return this.collectionDragAndDropState?.dnd;
    }
    constructor(params) {
        this.collectionDragAndDropState = null;
        this.forceRenderIndexes = undefined;
        this.reportBi = () => {
            // report columns re-order BI here
        };
        const { customColumns, dataSource, components } = params;
        this.components = components;
        this.container = customColumns.container;
        this.listRect = new RectState({
            container: customColumns.container,
        });
        this.customColumns = customColumns;
        this.dataSource = dataSource;
        this.columnsActions = new CollectionOptimisticActions({
            container: this.container,
            collection: this.customColumns.columnsCollection,
        });
        this.collectionDragAndDropState = new CollectionDragAndDropState({
            state: this,
            a11yContainer: params.modalsContainerRef,
            container: this.container,
        });
        makeObservable(this, {
            _onCustomColumnsReorder: action.bound,
            containerRect: computed,
            orderedColumns: computed,
            orderedColumnsByReorderDisabled: computed,
        });
    }
    get orderedColumnsByReorderDisabled() {
        return this.dataSource.columns.reduce((state, column) => {
            column.reorderDisabled
                ? state.reorderDisabled.push(column)
                : state.regular.push(column);
            return state;
        }, { regular: [], reorderDisabled: [] });
    }
    get orderedColumns() {
        const { dataSource } = this;
        const { selectedColumns: { value: selectedColumns }, } = dataSource;
        const { reorderDisabled, regular } = this.orderedColumnsByReorderDisabled;
        return [
            ...reorderDisabled,
            ...regular.sort(indexOfCompareFn(selectedColumns, (c) => c.id)),
        ];
    }
    get collection() {
        return this.customColumns.columnsCollection;
    }
    get containerRect() {
        const { listRect } = this;
        if (listRect.rect.left) {
            return {
                ...listRect.rect,
            };
        }
        return undefined;
    }
    _onCustomColumnsReorder(columnId, overColumnId) {
        const { dataSource: { selectedColumns }, } = this;
        const columnsArray = selectedColumns.value;
        const reorderedColumnsArray = arrayMove(columnsArray, columnsArray.findIndex((c) => c.id === columnId), columnsArray.findIndex((c) => c.id === overColumnId));
        selectedColumns.refresh(reorderedColumnsArray);
    }
    init() {
        const { columnsActions } = this;
        const disposers = [
            columnsActions.init(),
            addEventListener(columnsActions.events, 'updated', async () => {
                const { customColumns: { columnsCollection }, } = this;
                await columnsCollection.refreshAllPages();
            }),
        ];
        return () => {
            disposers.forEach((disposer) => disposer?.());
        };
    }
}
//# sourceMappingURL=CustomColumnsDragAndDropState.js.map