import React                                             from 'react';
import { Column }                                        from 'react-table';
import { withKnobs }                                     from '@storybook/addon-knobs';
import { Title }                                         from '../title/title.component';
import { Wrapper }                                       from '../wrapper/wrapper.component';
import { getTableCells, getTableFooter, getTableHeader } from './data/table-data';
import { DataType, Table }                               from './table.component';

export default {
    title:      'GEENEE-UI/Table',
    component:  Table,
    decorators: [ withKnobs ],
    parameters: {
        design: {
            type: 'figma',
            url:  'https://www.figma.com/file/GOLs0PKtnDsK3wyUUILuCj/01---Builder-UI?node-id=44%3A0'
        }
    }
};

export function Playground() {
    const columns: Column<DataType>[] = React.useMemo(() => [
        {
            accessor: 'features',
            minWidth: 270,
            // width:    352,
            Header:   getTableHeader(0),
            Cell:     ({ cell: { value } }) => <Wrapper key={ value }>{ value }</Wrapper>
        },
        {
            accessor: 'hobbyists',
            minWidth: 180,
            // width:    192,
            Header:   getTableHeader(1),
            Footer:   getTableFooter(0),
            Cell:     ({ cell: { value } }) => <Wrapper key={ value }>{ value }</Wrapper>
        },
        {
            accessor: 'premium',
            minWidth: 180,
            // width:    192,
            Header:   getTableHeader(2),
            Footer:   getTableFooter(1),
            Cell:     ({ cell: { value } }) => <Wrapper key={ value }>{ value }</Wrapper>
        },
        {
            accessor: 'teams',
            minWidth: 180,
            // width:    192,
            Header:   getTableHeader(3),
            Footer:   getTableFooter(2),
            Cell:     ({ cell: { value } }) => <Wrapper key={ value }>{ value }</Wrapper>
        },
        {
            accessor: 'enterprise',
            minWidth: 180,
            // width:    192,
            Header:   getTableHeader(4),
            Footer:   getTableFooter(3),
            Cell:     ({ cell: { value } }) => <Wrapper key={ value }>{ value }</Wrapper>
        }
    ], []);

    const data = React.useMemo(() => getTableCells(), []);

    return (
        <div
            className="story-wrapper"
            style={ {
                display:       'flex',
                flexDirection: 'row',
                flexWrap:      'wrap',
                width:         '100%'
            } }
        >
            <span key="1" className="story-element">
                <Wrapper padding='sm'>
                    <Title size='xxl' weight='regular' margin='md'>Billing Options</Title>
                    <Wrapper overflow='hidden' frame='solid-default'>
                        <Table data={ data } columns={ columns } />
                    </Wrapper>
                </Wrapper>
            </span>
        </div>
    );
}