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

const columns: IColumn[] = [
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
  { 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,
        colspan: 3,
        rowspan: 2,
      },
      null,
      null,
    ],
  },
  {
    id: 2,
    i: 1,
    type: 'body' as any,
    area: 'flatten' as any,
    level: 1,
    cells: [null, null, null],
  },
  {
    id: 3,
    i: 2,
    type: 'body' as any,
    area: 'flatten' as any,
    cells: [
      {
        id: 31,
        value: 1,
        rowId: 3,
        i: 2,
        j: 0,
        formula: 'sumRight()',
        formulaDisabled: false,
      },
      {
        id: 32,
        value: 1,
        rowId: 3,
        i: 2,
        j: 1,
      },
      {
        id: 33,
        value: 1,
        rowId: 3,
        i: 2,
        j: 2,
      },
    ],
  },
];

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="mergeCell" onClick={() => this.ref.current!.commands.mergeCell({})}>
            智能合并
          </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;