import * as React from 'react';
import { storiesOf } from '@storybook/react';
import SpreadSheetProvider from '../SpreadSheetProvider';
import { Props, IRowWithCell } from '../SpreadSheetProvider/index.data';
import * as R from 'rambda';

const sheet: Props = {
  usage: 'editor',
  padding: { bottom: 200, right: 500 },
  freezeAt: { i: 0, j: 0 },
  columns: [
    { width: 90, type: 'text' },
    { width: 90, type: 'richtext' },
    { width: 90, type: 'numeric' },
    { width: 90, type: 'text' },
    { width: 90, type: 'text' },
    { width: 90, type: 'text' },
  ],
  rows: R.range(0, 100).map(i => ({
    id: 'row' + i,
    type: 'header',
    level: 1,
    cells: R.range(0, 6).map(j => ({
      id: `${i * 100} - ${j}`,
      value: j === 2 ? 3 : `${i * 100 + j}+++++++++++++++++++++++<br/>+++++++++++`,
      style: {
        fontSize: 16,
      },
    })),
  })),
};

storiesOf('sheet', module).add('lazy-load', () => {
  return (
    <div style={{ width: 500, height: 600, position: 'relative', overflow: 'hidden' }}>
      <SpreadSheetProvider {...sheet} />
    </div>
  );
});