import React, { useMemo, type ReactNode } from 'react';
import type { FiltersMap } from '@wix/bex-core';
import type { EditableTableState } from '../../state/EditableTable';
import type { EditableColumn } from '../../state/EditableTable/types';
import { HeaderFieldActions } from './HeaderFieldActions';

/**
 * Builds the per-column header menu. Field-management comes from the table's
 * field source (collectionFieldsSource); sort / hide / filter are table-wired.
 * Each column's menu is its own observer (HeaderFieldActions), so loading and
 * field-list changes re-render it without recomputing this map.
 */
export function useHeaderActions<T, F extends FiltersMap>(
  state: EditableTableState<T, F>,
  columns: EditableColumn<T>[],
  disabled?: boolean,
): Record<string, ReactNode> {
  return useMemo(() => {
    if (disabled) {
      return {};
    }
    const result: Record<string, ReactNode> = {};
    for (const col of columns) {
      result[col.id] = <HeaderFieldActions state={state} column={col} />;
    }
    return result;
  }, [state, columns, disabled]);
}