import React from "react";

export type IColumnProps<TRow, TChange, TError> = {
  /** This must be unique across all columns */
  key: string;
  /** How to render a cell that is not being edited */
  renderCell: (props: {
    /** The row being rendered */
    row: TRow;
    errors: (TError | null)[];
    isReadonly: boolean;
    /**
     * Callback to be called if there should be a change for this row. Useful
     * for checkboxes
     */
    onChange: (change: TChange) => void;
    /**
     * Callback to be called if this cell should be opened for editing. Useful
     * for a button to open a dropdown
     */
    onEdit: () => void;
  }) => React.ReactNode;
  /**
   * How to render a cell that is being edited. Only one cell can be edited at a time
   */
  renderEditor: (props: {
    /** The row being edited */
    row: TRow;
    /** 
     * Callback to be called when a change is made. It is often useful to only
     * call this when the user is done editing, rather than constantly as they
     * are editing
     */
    onChange: (change: TChange) => void;
    /** 
     * Callback to be called the user is done editing and the editor should be
     * closed
     */
    onBlur: () => void;
  }) => React.ReactNode;
  /**
   * The value that should be saved to the user's clipboard with CMD/CTRL+C is
   * pressed on a cell
   */
  onCopy: (row: TRow) => string;
  /**
   * How to update a cell when CMD/CTRL+V is pressed on a cell and there is
   * data in the clipboard that could be applied
   */
  onPaste: (row: TRow, value: string) => TChange;
  /**
   * How to update a cell when backspace/delete is pressed on a cell. This is
   * also called when pressing any key on a non-edited cell before the editor is
   * opened.
   */
  onClear: (row: TRow) => TChange;
  minWidth?: number;
  maxWidth?: number;
  borderLeftColor?: string;
  borderRightColor?: string;
  /**
   * Readonly cells cannot be editor or pasted to
   */
  isReadonly?: (row: TRow) => boolean;
};