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

const columns: IColumn[] = [
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
  { width: 60, type: 'numeric' },
];
const rows: IRowWithCell[] = [
  {
    id: 1,
    type: 'body' as any,
    level: 1,
    cells: [
      { id: 11, value: 10, formula: `sumChildren()`, formulaDisabled: false },
      { id: 12, value: 10, formula: `sumChildren()`, formulaDisabled: false },
      { id: 13, value: 10, formula: `sumLeft(2)`, formulaDisabled: false },
    ],
  },
  {
    id: 2,
    type: 'body' as any,
    level: 2,
    cells: [
      { id: 21, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 22, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 23, value: 10, formula: `sumLeft(2)`, formulaDisabled: false },
    ],
  },
  {
    id: 3,
    type: 'body' as any,
    level: 2,
    cells: [
      { id: 31, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 32, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 33, value: 10, formula: `sumLeft(2)`, formulaDisabled: false },
    ],
  },
  {
    id: 4,
    type: 'body' as any,
    level: 1,
    cells: [
      { id: 41, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 42, value: 10, formula: `sumChildren()`, formulaDisabled: true },
      { id: 43, value: 10, formula: `sumLeft(2)`, formulaDisabled: false },
    ],
  },
  {
    id: 5,
    type: 'body' as any,
    level: 1,
    cells: [
      { id: 51, value: 10, formula: `sumSiblings()`, formulaDisabled: false },
      { id: 52, value: 10, formula: `sumSiblings()`, formulaDisabled: false },
      { id: 53, value: 10, formula: `sumLeft(2)`, formulaDisabled: false },
    ],
  },
];

export default () => {
  return (
    <div>
      <div>目的: 初始化sheet时, 公式应该被正确解析(未指定命名策略, 无法选单元格)</div>
      <div>
        <SpreadSheet
          usage="editor"
          rows={rows}
          columns={columns}
          onSelectionChanged={selection => console.log(selection)}
          formulaConfig={{ userFormula: 'byPosition' } as any}
        />
      </div>
    </div>
  );
};