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, flatten_helpers } from '../helper';

const columns: IColumn[] = [{ 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,
        formulaDisabled: true,
      },
    ],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    level: 1,
    area: 'flatten' as any,
    cells: [
      {
        id: 21,
        value: 1,
        rowId: 2,
        i: 1,
        j: 0,
        formulaDisabled: true,
      },
    ],
  },
  {
    id: 3,
    i: 2,
    type: 'body' as any,
    area: 'flatten' as 'flatten',
    level: 1,
    sealed: true,
    cells: [
      {
        id: 31,
        value: 1,
        rowId: 3,
        i: 2,
        j: 0,
        formula: `sum({{id11}}:{{id21}})`,
        formulaDisabled: false,
      },
    ],
  },
];

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

  render() {
    return (
      <div>
        <div>目的1: 检查插入行时, 相应的FormulaDisabled设置是否正常 ( 不用检查结果 )</div>
        <div>目的2: 是否可正确撤销 / 重做 </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="insert"
            onClick={() =>
              this.ref.current!.commands.insertRow({
                helpers: flatten_helpers,
                rows: [
                  {
                    id: 100,
                    i: 0,
                    type: 'body' as any,
                    level: 1,
                    cells: [
                      {
                        id: 100,
                        value: 100,
                        rowId: 100,
                        i: 0,
                        j: 0,
                      },
                    ],
                  },
                ],
              })
            }
          >
            插入(id原因, 不可连续插入, 插一次undo一次)
          </button>
          <button
            id="delete"
            onClick={() =>
              this.ref.current!.commands.deleteRow({
                helpers: flatten_helpers,
              })
            }
          >
            remove
          </button>
          <button
            id="moveup"
            onClick={() =>
              this.ref.current!.commands.moveRow({
                type: 'up',
              })
            }
          >
            move up
          </button>
          <button
            id="movedown"
            onClick={() =>
              this.ref.current!.commands.moveRow({
                type: 'down',
              })
            }
          >
            move down
          </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;
