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

const columns: IColumn[] = [{ width: 80, type: 'row-no' }];
const rows = [
  {
    id: 1,
    i: 0,
    type: 'body' as any,
    level: 1,
    cells: [{ id: 1, j: 0 }],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    level: 2,
    cells: [{ id: 2, j: 0 }],
  },
  {
    id: 3,
    i: 2,
    type: 'body' as any,
    level: 3,
    cells: [{ id: 3, j: 0 }],
  },
  {
    id: 4,
    i: 3,
    type: 'body' as any,
    level: 1,
    cells: [{ id: 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="moveLeftRow2"
            onClick={() => this.ref.current!.commands.pushRow({ type: 'left' } as any)}
          >
            第一步: 撤销,选行2, 然后升级
          </button>
          <button
            id="moveRightRow2"
            onClick={() => this.ref.current!.commands.pushRow({ type: 'right' } as any)}
          >
            第二步: 撤销,选行2, 然后降级(无效果)
          </button>
          <button
            id="moveRightRow4"
            onClick={() => this.ref.current!.commands.pushRow({ type: 'right' } as any)}
          >
            第二步: 撤销,选行4, 然后降级
          </button>
        </div>
        <div>
          <SpreadSheet
            usage="editor"
            rows={rows}
            columns={columns}
            ref={this.ref}
            env={this.props.env}
          />
        </div>
      </div>
    );
  }
}

export default Story;