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' }];
const rows = [
  {
    id: 1,
    i: 0,
    type: 'body' as any,
    level: 1,
    cells: [
      {
        id: 11,
        value: 1,
        rowId: 1,
        i: 0,
        j: 0,
        formula: `sumChildren()`,
        formulaDisabled: true,
      },
    ],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    level: 1,
    sealed: true,
    cells: [
      { id: 12, value: 1, rowId: 2, i: 1, j: 0, formula: `sumSibling()`, formulaDisabled: true },
    ],
  },
];

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="insertSibling"
            onClick={() =>
              this.ref.current!.commands.insertTreeRow({
                type: 'sibling',
                helpers: helpers,
                rows: [
                  {
                    id: 100,
                    i: 0,
                    type: 'body' as any,
                    level: 1,
                    cells: [
                      {
                        id: 100,
                        value: 100,
                        rowId: 100,
                        i: 0,
                        j: 0,
                      },
                    ],
                  },
                ],
              })
            }
          >
            第一步: 选中行1, 插入平级(单个)[1,100,1]
          </button>
          <button
            id="insertChild"
            onClick={() =>
              this.ref.current!.commands.insertTreeRow({
                type: 'child',
                helpers,
                rows: [
                  {
                    id: 100,
                    type: 'body' as any,
                    level: 1,
                    cells: [
                      {
                        id: 100,
                        value: 100,
                        rowId: 100,
                        i: 0,
                        j: 0,
                      },
                    ],
                  },
                ],
              })
            }
          >
            第二步: 撤销前一步, 在行1下插入1个下级[100,100,1]
          </button>
          <button
            id="insertChildMultiple"
            onClick={() =>
              this.ref.current!.commands.insertTreeRow({
                type: 'child',
                helpers,
                rows: [
                  {
                    id: 100,
                    type: 'body' as any,
                    level: 1,
                    cells: [
                      {
                        id: 100,
                        value: 100,
                        i: 0,
                        j: 0,
                        formulaDisabled: false,
                        formula: 'sumChildren()',
                      },
                    ],
                  },
                  {
                    id: 101,
                    type: 'body' as any,
                    level: 2,
                    cells: [
                      {
                        id: 101,
                        value: 100,
                        i: 1,
                        j: 0,
                      },
                    ],
                  },
                  {
                    id: 102,
                    type: 'body' as any,
                    level: 2,
                    cells: [
                      {
                        id: 102,
                        value: 100,
                        i: 2,
                        j: 0,
                      },
                    ],
                  },
                ],
              })
            }
          >
            第三步: 撤销前一步, 在行1下插入子树[200,200,100,100,1]
          </button>
          <button
            id="insertChildNop"
            onClick={() =>
              this.ref.current!.commands.insertTreeRow({
                type: 'child',
                helpers,
                rows: [{ id: 100, type: 'body' as any, level: 1, cells: [] }],
              })
            }
          >
            第四步: 撤销前一步, 选中行2, 插入一行(sealed:true行插入失败)
          </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;