import { FiltersMap } from '@wix/bex-core';
import { useEffect, useState } from 'react';
import { useToolbarCollectionSyncProps } from '../ToolbarCollection/useToolbarCollectionSyncProps';
import { DataExtensionProps, DataExtensionType } from '../DataExtension';
import { isValidElement } from '../isValidElement';
import { KanbanBaseProps } from './KanbanProps';

export function useKanbanCollectionSyncProps<T, S, F extends FiltersMap>(
  props: KanbanBaseProps<T, S, F>,
) {
  const { state: kanban, dataExtension } = props;

  const state = kanban.toolbar;

  useToolbarCollectionSyncProps({
    ...props,
    state,
    isUsingDragAndDrop: false,
    isUsingBulkActionsToolbar: false,
    isUsingHorizontalScroll: false,
    isUsingFolders: false,
    isUsingTableVirtualization: false,
  });

  useState(() => {
    if (isValidElement<DataExtensionProps, DataExtensionType>(dataExtension)) {
      dataExtension.type.setDataExtensionOnTable(state, dataExtension.props);
    } else {
      dataExtension?.setDataExtensionOnTable(state);
    }
  });

  useEffect(() => {
    if (!dataExtension) {
      return;
    }
    (isValidElement<DataExtensionProps, DataExtensionType>(dataExtension)
      ? dataExtension.type
      : dataExtension
    ).syncTableCollectionProps(state);
  }, []);

  return state;
}