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: 2,
        rowspan: 1,
      },
      null,
      {
        id: 13,
        value: 1,
        rowId: 1,
        i: 0,
        j: 2,
        colspan: 2,
        rowspan: 2,
      },
      null,
    ],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    area: 'flatten' as any,
    level: 1,
    cells: [
      {
        id: 21,
        value: 1,
        rowId: 2,
        i: 1,
        j: 0,
        colspan: 2,
        rowspan: 1,
      },
      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="deleteColumnAt0"
            onClick={() =>
              this.ref.current!.commands.deleteColumn({
                j: 0,
              })
            }
          >
            撤销, 在j=0列删除
          </button>
          <button
            id="deleteColumnAt1"
            onClick={() =>
              this.ref.current!.commands.deleteColumn({
                j: 1,
              })
            }
          >
            撤销, 在j=1列删除
          </button>
          <button
            id="deleteColumnAt2"
            onClick={() =>
              this.ref.current!.commands.deleteColumn({
                j: 2,
              })
            }
          >
            撤销, 在j=2列删除
          </button>
          <button
            id="deleteColumnAt3"
            onClick={() =>
              this.ref.current!.commands.deleteColumn({
                j: 3,
              })
            }
          >
            撤销, 在j=3列删除
          </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;
