import {observer} from 'mobx-react';
import React from 'react';
import {IRow, IColumn} from '../../store/table';
import {RendererProps} from '../../factory';
import {Action} from '../Action';
import {isClickOnInput} from '../../utils/helper';

interface TableRowProps extends Pick<RendererProps, 'render'> {
  onCheck: (item: IRow) => void;
  onRowClick: (item: IRow) => void;
  classPrefix: string;
  renderCell: (
    region: string,
    column: IColumn,
    item: IRow,
    props: any
  ) => React.ReactNode;
  columns: Array<IColumn>;
  item: IRow;
  parent?: IRow;
  itemClassName?: string;
  itemIndex: number;
  regionPrefix?: string;
  checkOnItemClick?: boolean;
  checkOnItemActive?: boolean;
  ignoreFootableContent?: boolean;
  [propName: string]: any;
}

// @observer
export class TableRow1 extends React.Component<TableRowProps> {
  // reaction?: () => void;
  constructor(props: TableRowProps) {
    super(props);
    this.handleAction = this.handleAction.bind(this);
    this.handleQuickChange = this.handleQuickChange.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.handleItemSelect = this.handleItemSelect.bind(this);
  }

  // 定义点击一行的行为，通过 itemAction配置
  handleItemClick(e: React.MouseEvent<HTMLTableRowElement>) {
    if (isClickOnInput(e)) {
      return;
    }
    const {itemAction, onAction, item} = this.props;
    if (itemAction) {
      onAction && onAction(e, itemAction, item?.data);
      item.toggle();
    } else {
      this.props.onCheck(this.props.item);
    }
  }

  // 定义点击一行的行为，通过 itemAction配置
  handleItemSelect(e: React.MouseEvent<HTMLTableRowElement>) {
    if (isClickOnInput(e)) {
      return;
    }

    this.props.onRowClick(this.props.item);
  }

  handleAction(e: React.UIEvent<any>, action: Action, ctx: any) {
    const {onAction, item} = this.props;
    onAction && onAction(e, action, ctx || item.data);
  }

  handleQuickChange(
    values: object,
    saveImmediately?: boolean,
    savePristine?: boolean,
    resetOnFailed?: boolean
  ) {
    const {onQuickChange, item} = this.props;
    onQuickChange &&
      onQuickChange(item, values, saveImmediately, savePristine, resetOnFailed);
  }

  handleChange(
    value: any,
    name: string,
    submit?: boolean,
    changePristine?: boolean
  ) {
    if (!name || typeof name !== 'string') {
      return;
    }

    const {item, onQuickChange} = this.props;

    onQuickChange?.(
      item,
      {
        [name]: value
      },
      submit,
      changePristine
    );
  }

  render() {
    console.log('row')
    const {
      itemClassName,
      itemIndex,
      item,
      columns,
      renderCell,
      children,
      ignoreFootableContent,
      footableColSpan,
      regionPrefix,
      checkOnItemClick,
      checkOnItemActive,
      classPrefix: ns,
      render,
      classnames: cx,
      parent,
      itemAction,
      ...rest
    } = this.props;


    if (parent && !parent.expanded) {
      return null;
    }

    return (
      <tr
        onClick={(e)=>{
            checkOnItemClick || itemAction ? this.handleItemClick(e) : undefined,
            checkOnItemActive && this.handleItemSelect(e)
          }
        }
        data-index={item.depth === 1 ? item.newIndex : undefined}
        data-id={item.id}
        className={cx(
          itemClassName,
          {
            'is-hovered': item.isHover,
            'is-checked': item.checked,
            'is-actived': item.actived,
            'is-modified': item.modified,
            'is-moved': item.moved,
            'is-expanded': item.expanded,
            'is-expandable': item.expandable,
            [`Table-tr--hasItemAction`]: itemAction,
            [`Table-tr--odd`]: itemIndex % 2 === 0,
            [`Table-tr--even`]: itemIndex % 2 === 1
          },
          `Table-tr--${item.depth}th`
        )}
      >
        {columns.map(column =>
          renderCell(`${itemIndex}/${column.index}`, column, item, {
            // ...rest,
            rowIndex: itemIndex,
            colIndex: column.index,
            key: column.index,
            onAction: this.handleAction,
            onQuickChange: this.handleQuickChange,
            onChange: this.handleChange
          })
        )}
      </tr>
    );
  }
}


export const TableRow = observer((props: TableRowProps) => {
  const {
    itemClassName,
    itemIndex,
    item,
    columns,
    renderCell,
    children,
    ignoreFootableContent,
    footableColSpan,
    regionPrefix,
    checkOnItemClick,
    checkOnItemActive,
    classPrefix: ns,
    render,
    classnames: cx,
    parent,
    itemAction,
    ...rest
  } = props;


  console.log('row')

  // 定义点击一行的行为，通过 itemAction配置
  function handleItemClick(e: React.MouseEvent<HTMLTableRowElement>) {
    if (isClickOnInput(e)) {
      return;
    }
    const {itemAction, onAction, item} = props;
    if (itemAction) {
      onAction && onAction(e, itemAction, item?.data);
      item.toggle();
    } else {
      props.onCheck(props.item);
    }
  }

  // 定义点击一行的行为，通过 itemAction配置
  function handleItemSelect(e: React.MouseEvent<HTMLTableRowElement>) {
    if (isClickOnInput(e)) {
      return;
    }

    props.onRowClick(props.item);
  }

  function handleAction(e: React.UIEvent<any>, action: Action, ctx: any) {
    const {onAction, item} = props;
    onAction && onAction(e, action, ctx || item.data);
  }

  function handleQuickChange(
    values: object,
    saveImmediately?: boolean,
    savePristine?: boolean,
    resetOnFailed?: boolean
  ) {
    const {onQuickChange, item} = props;
    onQuickChange &&
      onQuickChange(item, values, saveImmediately, savePristine, resetOnFailed);
  }

  function handleChange(
    value: any,
    name: string,
    submit?: boolean,
    changePristine?: boolean
  ) {
    if (!name || typeof name !== 'string') {
      return;
    }

    const {item, onQuickChange} = props;

    onQuickChange?.(
      item,
      {
        [name]: value
      },
      submit,
      changePristine
    );
  }


  if (parent && !parent.expanded) {
    return null;
  }

  return (
    <tr
      onClick={(e)=>{
          checkOnItemClick || itemAction ? handleItemClick(e) : undefined,
          checkOnItemActive && handleItemSelect(e)
        }
      }
      data-index={item.depth === 1 ? item.newIndex : undefined}
      data-id={item.id}
      className={cx(
        itemClassName,
        {
          'is-hovered': item.isHover,
          'is-checked': item.checked,
          'is-actived': item.actived,
          'is-modified': item.modified,
          'is-moved': item.moved,
          'is-expanded': item.expanded,
          'is-expandable': item.expandable,
          [`Table-tr--hasItemAction`]: itemAction,
          [`Table-tr--odd`]: itemIndex % 2 === 0,
          [`Table-tr--even`]: itemIndex % 2 === 1
        },
        `Table-tr--${item.depth}th`
      )}
    >
      {columns.map(column =>
        renderCell(`${itemIndex}/${column.index}`, column, item, {
          // ...rest,
          rowIndex: itemIndex,
          colIndex: column.index,
          key: column.index,
          onAction: handleAction,
          onQuickChange: handleQuickChange,
          onChange: handleChange
        })
      )}
    </tr>
  )
})