import * as React from 'react';
import SpreadSheet from '../../../../SpreadSheetProvider';
import { IColumn, IRow } from '../../../../index.data';
import { FormulaManagerConfig } from '../../../../formula-manager/index.data';
import { SpreadSheetProps } from '../../../..';
import { IRowWithCell } from '../../../../SpreadSheetProvider/index.data';
import { helpers } from '../../helper';

const columns: IColumn[] = [
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
];
const rows = [
  {
    id: 1,
    i: 0,
    type: 'body' as any,
    level: 1,
    area: 'flatten' as any,
    cells: [
      {
        id: 11,
        value: 1,
        rowId: 1,
        i: 0,
        j: 0,
        colspan: 4,
        rowspan: 2,
        dataType: 'number',
        type: 'numeric',
      },
      null,
      null,
      null,
    ],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    area: 'flatten' as any,
    level: 1,
    cells: [null, null, null, null],
  },
];

class Story extends React.Component<{ env?: 'test' }> {
  ref = React.createRef<SpreadSheet>();

  render() {
    return (
      <div>
        <div>插入列</div>
        <div>
          <button id="undo" onClick={() => this.ref.current!.commands.undo()}>
            undo
          </button>
          <button id="redo" onClick={() => this.ref.current!.commands.redo()}>
            redo
          </button>
          <button
            id="insertColumnAt0"
            onClick={() =>
              this.ref.current!.commands.insertColumn({
                column: { width: 80 },
                copyAdjCellAttrs: ['value'],
                j: 0,
                cells: [{ value: 10 }, { value: 10 }],
              })
            }
          >
            撤销, 在最左侧插入1列
          </button>
          <button
            id="insertColumnAt4"
            onClick={() =>
              this.ref.current!.commands.insertColumn({
                column: { width: 80 },
                copyAdjCellAttrs: ['value'],
                j: columns.length,
                cells: [{ value: 10 }, { value: 10 }],
              })
            }
          >
            撤销, 在最右侧插入1列
          </button>
          <button
            id="insertColumnAt4_forceMerge"
            onClick={() =>
              this.ref.current!.commands.insertColumn({
                column: { width: 80 },
                j: columns.length,
                cells: [{ value: 10 }, { value: 10 }],
                forceMerge: 'left',
                copyAdjCellAttrs: ['value'],
              })
            }
          >
            撤销, 在最右侧插入列, 强制与左侧合并
          </button>
          <button
            id="insertColumnAt1"
            onClick={() =>
              this.ref.current!.commands.insertColumn({
                column: { width: 80 },
                copyAdjCellAttrs: ['value'],
                j: 1,
                cells: [{ value: 10 }, { value: 10 }],
              })
            }
          >
            撤销, 在j=1处插入列
          </button>
        </div>
        <div>
          <SpreadSheet
            usage="editor"
            rows={rows}
            columns={columns}
            ref={this.ref}
            env={this.props.env}
            formulaConfig={formulaConfig}
          />
        </div>
      </div>
    );
  }
}
const formulaConfig: SpreadSheetProps['formulaConfig'] = {
  userFormula: 'byName',
} as any;

export default Story;