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

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

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

  componentDidMount() {
    // 供enzyme使用
    const rowDimensions = {
      1: { top: 0, height: 30, offsetTop: 0, offsetHeight: 0 },
      2: { top: 30, height: 30, offsetTop: 0, offsetHeight: 0 },
      3: { top: 60, height: 30, offsetTop: 0, offsetHeight: 0 },
      4: { top: 90, height: 30, offsetTop: 0, offsetHeight: 0 },
    };
    const colDimensions = {
      0: { left: 0, width: 30, offsetLeft: 0, offsetWidth: 0 },
      // 2: { left: 0, width: 30 },
      // 3: { left: 0, width: 30 },
      // 4: { left: 0, width: 30 },
    };
    this.ref.current!.store.setState({ rowDimensions, colDimensions });
  }

  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="moveUpRow1"
            onClick={() => this.ref.current!.commands.moveRow({ type: 'up' })}
          >
            第一步: 撤销,选行1, 然后上移
          </button>
          <button
            id="moveDownRow1"
            onClick={() => this.ref.current!.commands.moveRow({ type: 'down' })}
          >
            第二步: 撤销,选行1, 然后下移
          </button>
          <button
            id="moveDownRow4"
            onClick={() => this.ref.current!.commands.moveRow({ type: 'down' })}
          >
            第三步: 撤销,选行4, 然后下移
          </button>
        </div>
        <div>
          <SpreadSheet
            usage="editor"
            rows={rows}
            columns={columns}
            ref={this.ref}
            env={this.props.env}
          />
        </div>
      </div>
    );
  }
}

export default Story;