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

const columns: IColumn[] = [
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
];
const rows = [
  {
    id: 1,
    type: 'body' as any,
    level: 1,
    cells: [
      { id: 11, value: 10 },
      { id: 12, value: 10, formula: `{{id11}}`, formulaDisabled: false },
      { id: 13, value: 10, formula: `{{id12}}`, formulaDisabled: false },
    ],
  },
];
const Store: React.FC = () => {
  const ref = React.useRef<SpreadSheet>(null);
  return (
    <div>
      <div>三个单元格分别为:A=1,B=A,C=B</div>
      <div>1. 直接修改第1个单元格, 将引起第2个第3个单元格改变</div>
      <div>2. 或: 选第1个单元格, 再点按钮修改, (结果: 3个单元格全变成2)</div>
      <div>
        <button onClick={() => ref.current!.commands.undo()}>undo</button>
        <button onClick={() => ref.current!.commands.redo()}>redo</button>
        <button onClick={() => ref.current!.commands.setCellData({ value: 2 })}>
          选择第1个单元格, 并设置第1个单元格的值为2
        </button>
      </div>
      <div>
        <SpreadSheet usage="editor" rows={rows} columns={columns} ref={ref} />
      </div>
    </div>
  );
};

storiesOf('command', module).add('setCellDataCommand', () => <Store />);