import React from 'react';
import { storiesOf } from '@storybook/react';
import { tableHOC } from '../index';
import { Row, Cell } from '../index';

const TABLE_HEADERS = [
  {
    title: 'age',
    keyToSort: 'age',
    asc: true,
    isSorted: true,
    isSortable: true,
  },
  {
    title: 'sex',
    keyToSort: 'sex',
    asc: false,
    isSortable: true,
  },
  {
    title: 'location',
    keyToSort: 'location',
    asc: false,
    isSortable: true,
  },
];

const list = [
  {
    age: 20,
    sex: 'M',
    location: 'south africa',
  },
  {
    age: 22,
    sex: 'F',
    location: 'south america',
  },
]

const TableComponent = ({ list }) => (
  list.map((exchange) => {
    const { age, sex, location } = exchange;
    return (
      <Row key={age}>
        <Cell title={age} />
        <Cell title={sex} />
        <Cell title={location} />
      </Row>
    );
  })
);

const TableHOC = tableHOC(TableComponent);

storiesOf('Web|Table', module)
  .add('hoc', () => (
    <TableHOC tableHeaders={TABLE_HEADERS} list={list} />
  ))
