import { useEffect, useMemo, useState } from 'react';
import { runInAction } from 'mobx';
import { usePageContext } from '@wix/bex-core/react';
import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
export function useColumnsSyncProps(props) {
    const { toolbar, customColumns, columns: tableColumns } = props;
    const { modalsContainerRef } = usePageContext();
    const router = useWixPatternsRouter();
    const customColumnsProps = useMemo(() => {
        if (customColumns == null) {
            return null;
        }
        const { onColumnClick } = customColumns.props;
        return {
            onColumnClick,
            dragAndDrop: customColumns.type.dragAndDrop,
        };
    }, [customColumns]);
    useState(() => customColumns?.type.setCustomColumnsState({
        toolbar,
        customColumnsProps: {
            dragAndDrop: customColumnsProps?.dragAndDrop,
        },
        modalsContainerRef,
    }));
    useEffect(() => {
        runInAction(() => {
            toolbar.customColumnsProps = customColumnsProps;
        });
    }, [customColumnsProps]);
    useEffect(() => {
        if (router?.isUsingCache) {
            return;
        }
        toolbar._adjustSortWithNewColumns(tableColumns);
    }, [tableColumns.map((e, i) => e.id ?? i).join('')]);
    useEffect(() => {
        toolbar.setNewColumns(tableColumns);
    }, [
        tableColumns,
        customColumnsProps != null,
        toolbar.customColumnsStateInitialized,
    ]);
    const customColumnsDependency = useMemo(() => JSON.stringify(tableColumns.map(({ id, reorderDisabled, hiddenFromCustomColumnsSelection, hideable }, i) => ({
        id: id ?? i,
        reorderDisabled,
        hiddenFromCustomColumnsSelection,
        hideable,
    }))), [tableColumns]);
    useEffect(() => {
        toolbar._adjustSelectedColumns();
    }, [
        customColumnsDependency,
        customColumnsProps != null,
        toolbar.customColumnsStateInitialized,
    ]);
}
//# sourceMappingURL=useColumnsSyncProps.js.map