// @flow
import React from 'react';

import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { Table } from './index';
import { Td } from './td/index';
import { Th } from './th/index';

import { Tr } from './tr/index';
import { Box } from '../../../primitives/index';
import { Card } from '../index';
import { Link, Span } from '../../typography/index';

import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TABLE.mkd';

const headerData = [
  { key: 1, content: 'Name' },
  { key: 2, content: 'Age' },
  { key: 3, content: 'Email' },
];

const rowData = [
  { name: 'Jason', age: '23', email: 'jason@wealthsimple.com', key: 1 },
  { name: 'Alex', age: '19', email: 'alex@wealthsimple.com', key: 2 },
  { name: 'Emily', age: '21', email: 'emily@wealthsimple.com', key: 3 },
  { name: 'Udara', age: '42', email: 'udara@wealthsimple.com', key: 4 },
];

const headers = headerData.map(headerItem => (
  <Th key={headerItem.key}>{headerItem.content}</Th>
));

const rows = rowData.map(rowItem => (
  <Tr key={rowItem.key}>
    <Td>
      <Span fontSize="f1" colorName="greyscale-black">
        {rowItem.name}
      </Span>
    </Td>
    <Td>
      <Span fontSize="f1" colorName="greyscale-black">
        {rowItem.age}
      </Span>
    </Td>
    <Td>
      <Link
        href={`mailto:${rowItem.email}`}
        target="_blank"
        colorName="greyscale-black"
      >
        <Span fontSize="f1">{rowItem.email}</Span>
      </Link>
    </Td>
  </Tr>
));

const TableStory = () => (
  <Box colorName="background" spacing="p3">
    <Card>
      <Table headers={headers} rows={rows} thWidth={30} />
    </Card>
  </Box>
);

storiesOf('Core/Structures/Tables', module)
  .addDecorator(withInfo(configDocs(docs, Table)))
  .add('normal', () => <TableStory />);
