import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import React from 'react';
import { setCustomColumnsState } from '../../state/initCustomColumns';
import { Column } from '../../model';
import { CustomColumnsCTAButton } from '../CustomColumnsPanel/CustomColumnsCTAButton';
import type { CustomColumnsDragAndDrop } from './CustomColumnsDragAndDrop';

export interface CustomColumnsBaseProps {
  /**
   * Adds a callback that is called when a column is clicked.
   * @param column
   * @param checked
   * @external
   */
  onColumnClick?: (column: Column, checked: boolean) => unknown;
}

export interface CustomColumnsProps extends CustomColumnsBaseProps {}

export function CustomColumns({ onColumnClick }: CustomColumnsProps) {
  const state = useToolbarCollectionContext();
  return <CustomColumnsCTAButton onColumnClick={onColumnClick} state={state} />;
}

CustomColumns.setCustomColumnsState = setCustomColumnsState;
CustomColumns.dragAndDrop = undefined as
  | typeof CustomColumnsDragAndDrop
  | undefined;
CustomColumns.displayName = 'CustomColumns';