import type { Key, ReactElement } from 'react';
import type { BaseTableProps, ColumnType } from '../base-table/typings';
import type { RuleItem } from 'async-validator/dist-types/interface';

type RowType = {
  key: Key;
  index: number;
};

type EditableCellFocusedType = 0 | 1 | 2;

export type EditableRender<T> = (
  val: any,
  record: T,
  index: number,
  opts: {
    focused: EditableCellFocusedType;
    onFocus: () => void;
    errors?: string[];
    onChange: (value: Partial<T>) => void;
  },
) => ReactElement | null;

export type EditableTableRule<T> = Pick<
  RuleItem,
  'required' | 'message' | 'pattern' | 'min' | 'max' | 'len' | 'type'
> & {
  validator?: (rule: unknown, val: any, record: T) => void | Promise<void>;
};

export type EditableTableRef = {
  validate: () => Promise<any>;
};

export interface EditableTableColumnType<T>
  extends Pick<
    ColumnType<T>,
    'key' | 'width' | 'render' | 'align' | 'ellipsis' | 'title' | 'fixed'
  > {
  dataIndex: string;
  render?: (
    val: any,
    record: T,
    index: number,
  ) => ReactElement | string | number | null | undefined;
  editable?: {
    /**
     * @description 是否禁止可编辑单元格支持上下键切换，注意不是禁止单元格表单组件的上下键操作，而是EditableCell的上下键切换
     */
    disableLeftRight?: boolean;
    /**
     * @description 同disabledLeftRight
     */
    disableUpDown?: boolean;
    rules?: EditableTableRule<T>[];
    /**
     * @description 是否自定义渲染单元格内表单组件，需要配合EditableCell组件进行使用，详见demo中的使用方式
     */
    renderFormItem: EditableRender<T> | ReactElement;
  };
}

export type EditableTableRowError = {
  key: string;
  errors: string[];
  children?: {
    key: string;
    errors: string[];
  }[];
};

export interface EditableTableProps<T>
  extends Pick<
    BaseTableProps<T>,
    'rowKey' | 'virtual' | 'scroll' | 'pagination' | 'loading' | 'summaryRecord' | 'summaryTitle'
  > {
  editable?: boolean;
  value?: T[];
  error?: string | EditableTableRowError[];
  onChange?: (value: T[]) => void;
  rowSelection?: BaseTableProps<RowType>['rowSelection'];
  rowActions?: BaseTableProps<RowType>['rowActions'];
  columns: EditableTableColumnType<T>[];
}

export type EditableTableObserverHandler<T> = (params: {
  record?: T;
  focused?: EditableCellFocusedType;
  errors?: string[] | null;
}) => void;