import * as React from 'react';
import SpreadSheet from '../../../SpreadSheetProvider';
import { IColumn } from '../../../index.data';

const columns: IColumn[] = [{ width: 60, type: 'numeric' }];
const rows = [
  {
    id: 1,
    i: 0,
    type: 'body' as any,
    level: 1,
    cellIds: [1],
    cells: [{ id: 1, value: 1, j: 0 }],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    level: 2,
    cellIds: [2],
    cells: [{ id: 2, value: 2, j: 0 }],
  },
  {
    id: 3,
    i: 2,
    type: 'body' as any,
    level: 2,
    cellIds: [3],
    cells: [{ id: 3, value: 3, j: 0 }],
  },
  {
    id: 4,
    i: 3,
    type: 'body' as any,
    level: 1,
    cellIds: [4],
    cells: [{ id: 4, value: 4, j: 0 }],
  },
];

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="deleteRow1" onClick={() => this.ref.current!.commands.deleteRow({} as any)}>
            第一步: 撤销, 选择行1, 删除之[4]
          </button>
          <button id="deleteRow2" onClick={() => this.ref.current!.commands.deleteRow({} as any)}>
            第二步: 撤销, 选择行2, 删除之[1,3,4]
          </button>
          <button id="deleteRow4" onClick={() => this.ref.current!.commands.deleteRow({} as any)}>
            第三步: 撤销, 选择行4, 删除之[1,2,3]
          </button>
          <div>
            <SpreadSheet
              usage="editor"
              rows={rows}
              columns={columns}
              ref={this.ref}
              env={this.props.env}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Story;