import React from "react";
import { TableAddon, TableColumn } from "../TableProps";

/**
 * `injectable` 插件用于支持表格注入自定义 Props。
 *
 * 其中函数参数中将返回现有 `props`，用于需要属性合并的情况。
 */
export interface InjectableOptions<Record = any> {
  /**
   * 设置 Cell props
   * @since 2.3.5
   */
  cell?: (
    props: React.HTMLAttributes<HTMLTableDataCellElement>,
    context: {
      record: Record;
      rowKey: string;
      recordIndex: number;
      columnIndex?: number;
      column: TableColumn<Record>;
    }
  ) => React.HTMLAttributes<HTMLTableDataCellElement>;

  /**
   * 设置行 Props
   */
  row?: (
    props: React.HTMLAttributes<HTMLTableRowElement>,
    context: {
      record: Record;
      rowKey: string;
      recordIndex: number;
    }
  ) => React.HTMLAttributes<HTMLTableRowElement>;

  /**
   * 设置内容 Props
   */
  body?: (
    props: React.HTMLAttributes<HTMLDivElement>
  ) => React.HTMLAttributes<HTMLDivElement>;

  /**
   * 设置表头 Props
   */
  head?: (
    props: React.HTMLAttributes<HTMLDivElement>
  ) => React.HTMLAttributes<HTMLDivElement>;

  /**
   * 设置表格 Props
   */
  table?: (
    props: React.HTMLAttributes<HTMLDivElement>
  ) => React.HTMLAttributes<HTMLDivElement>;
}

export function injectable({
  cell,
  row,
  body,
  head,
  table,
}: InjectableOptions): TableAddon {
  return {
    getInfo: () => ({ name: "injectable" }),
    onInjectColumn: !cell
      ? undefined
      : render => (record, rowKey, recordIndex, column, columnIndex) => {
          const result = render(
            record,
            rowKey,
            recordIndex,
            column,
            columnIndex
          );
          return {
            props: cell(result.props, {
              record,
              rowKey,
              recordIndex,
              column,
              columnIndex,
            }),
            children: result.children,
          };
        },
    onInjectRow: !row
      ? undefined
      : render => (record, rowKey, recordIndex, ...args) => {
          const result = render(record, rowKey, recordIndex, ...args);
          const props = row(result.row.props, {
            record,
            rowKey,
            recordIndex,
          });
          return {
            ...result,
            row: React.cloneElement(result.row, props),
          };
        },
    onInjectBody: !body
      ? undefined
      : render => (...args) => {
          const element = render(...args);
          return React.cloneElement(element, body(element.props));
        },
    onInjectHead: !head
      ? undefined
      : render => (...args) => {
          const element = render(...args);
          return React.cloneElement(element, head(element.props));
        },
    onInjectTable: !table
      ? undefined
      : render => (...args) => {
          const element = render(...args);
          return React.cloneElement(element, table(element.props));
        },
  };
}