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

import {Table} from '../../Components/Table/src';
import Currency from '../../Components/Currency/src';
import tableData, {NO_DATA as emptyData} from './mocks.js';
import {ArrowDown, ArrowUp, SIZE} from '../../Components/Icon/src';

const columns = [
  {
    Header: () => (
      <>
        Table header
      </>
    ),
    headerClassName: 'ReactTable__header-cell_right',
    accessor: 'amount',
    Cell: ({value}) => (
      <Currency
        value={parseFloat(value)}
        currencyCode=""
        decimalPosition={3}
      />
    ),
    maxWidth: 200,
    className: 'ReactTable__header-cell_right',
    sortable: true,
    filterable: true,
  },
  {
    Header: () => <>❤️</>,
    accessor: 'geo',
    maxWidth: 50,
    sortable: true,
  },
];

export default storiesOf('Components | Table', module)
  .add('Table has data', () => (
    <>
      <p
        style={{
          paddingBottom: '20px',
        }}
      >
        docs: https://react-table.js.org/
      </p>
      <Table
        columns={columns}
        data={tableData}
        showLoadingState={boolean('show loading state', false)}
        loading={boolean('loading', false)}
        defaultSorted={[
          {
            id: 'geo',
            desc: true,
          },
        ]}
        defaultPageSize={8}
        style={{height: 200}}
      />

    </>
  ))
  .add('Table no data', () => (
    <>
      <p>docs: https://react-table.js.org/</p>
      <Table columns={columns} items={emptyData} defaultPageSize={8} />
    </>
  ))
  .add('Table with expander', () => (
    <>
      <p
        style={{
          paddingBottom: '20px',
        }}
      >
        docs: https://react-table.js.org/
      </p>
      <Table
        columns={[...columns, {expander: true}]}
        data={tableData}
        defaultSorted={[
          {
            id: 'geo',
            desc: true,
          },
        ]}
        defaultPageSize={8}
        ExpanderComponent={boolean('Default expander', true) ? undefined : ({isExpanded}) => (isExpanded
          ? <ArrowDown size={SIZE.SMALL} />
          : <ArrowUp size={SIZE.SMALL} />
        )}
        SubComponent={() => (
          <div
            style={{
              background: 'white',
              padding: 15,
              margin: 15,
              border: 'solid',
            }}
          >
            <h4>Another table</h4>
            <Table columns={columns} items={emptyData} defaultPageSize={8} />
          </div>
        )}
      />
    </>
  ));