import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, text, number } from '@storybook/addon-knobs';

import { Table, Row, Cell, TableMin, RowMin, CellMin } from '../index';

const propsTable = ({
  isInitial = undefined,
  isHidden = undefined,
} = {}) => ({
  isInitial: boolean('is initial (table)', isInitial, 'table'),
  isHidden: boolean('is hidden (table)', isHidden, 'table'),
});

const propsRow = ({
  isHeader = undefined,
} = {}, groupId) => ({
  isHeader: boolean(`is header (${groupId})`, isHeader, groupId),
});

const propsCell = ({
  isMinimal = undefined,
  isHidden = undefined,
  isHeader = undefined,
  isSorted = undefined,
  isSortable = undefined,
  isWrap = undefined,
  isCenter = undefined,
  isRight = undefined,
  isPercentageWidth = undefined,
  isCenterVertical = undefined,
  isResponsive = undefined,
  title = undefined,
  asc = undefined,
  width = undefined,
} = {}, groupId) => ({
  isMinimal: boolean(`is minimal (${groupId})`, isMinimal, groupId),
  isHidden: boolean(`is hidden (${groupId})`, isHidden, groupId),
  isHeader: boolean(`is header (${groupId})`, isHeader, groupId),
  isSorted: boolean(`is sorted (${groupId})`, isSorted, groupId),
  isSortable: boolean(`is sortable (${groupId})`, isSortable, groupId),
  isWrap: boolean(`is wrap (${groupId})`, isWrap, groupId),
  isCenter: boolean(`is center (${groupId})`, isCenter, groupId),
  isRight: boolean(`is right (${groupId})`, isRight, groupId),
  isPercentageWidth: boolean(`is percentage width (${groupId})`, isPercentageWidth, groupId),
  isCenterVertical: boolean(`is center vertical (${groupId})`, isCenterVertical, groupId),
  isResponsive: boolean(`is responsive (${groupId})`, isResponsive, groupId),
  title: text(`title (${groupId})`, title, groupId),
  asc: text(`asc (${groupId})`, asc, groupId),
  width: number(`width (${groupId})`, width, {}, groupId),
});

storiesOf('Web|Table', module)
  .add('default', () => (
    <Table {...propsTable()}>
      <Row {...propsRow({ isHeader: true }, 'row header')}>
        <Cell {...propsCell({ isHeader: true, title: 'Name' }, 'cell header')} />
        <Cell {...propsCell({ isHeader: true, title: 'Age' }, 'cell header')} />
        <Cell {...propsCell({ isHeader: true, title: 'Sex' }, 'cell header')} />
      </Row>
      <Row {...propsRow({}, 'row')}>
        <Cell {...propsCell({ title: 'Vince' }, 'cell')} />
        <Cell {...propsCell({ title: '30' }, 'cell')} />
        <Cell {...propsCell({ title: 'M' }, 'cell')} />
      </Row>
      <Row>
        <Cell title="Jack" />
        <Cell title="32" />
        <Cell title="M" />
      </Row>
    </Table>
  ))
  .add('min', () => (
    <TableMin>
      <RowMin>
        <CellMin>Name</CellMin>
        <CellMin>Age</CellMin>
        <CellMin>Sex</CellMin>
      </RowMin>
      <RowMin>
        <CellMin>Vince</CellMin>
        <CellMin>30</CellMin>
        <CellMin>M</CellMin>
      </RowMin>
      <RowMin>
        <CellMin>Jack</CellMin>
        <CellMin>32</CellMin>
        <CellMin>M</CellMin>
      </RowMin>
    </TableMin>
  ))
