import { Story, Meta } from '@storybook/react';
import { Table, TableProps } from './Table';

export default {
    title: 'Components/Display/Table',
    component: Table,
    argTypes: {
        header: {
            description: 
            'Header column content. Must consist of a `{ value: any, isNumeric: boolean }` structure. IDs are generated by the component automatically and don\'t need to be supplied'
        },
        body: {
            description: 
            'Body rows. Require the same data structure as header columns'
        },
        sortable: {
            description: 'Whether the table should be sortable by column or not. Columns with non-text values will not sort'
        },
        className: {
            description: 'A CSS class that can be passed in to override the component\'s native styling, from root'
        },
        orderBy: {
            description: 'Header value to order sorting by. Only applicable if `sortable` is `true`'
        },
        order: {
            description: 'Set sorting to be ascending or descending. Only applicable if `sortable` is `true`'
        },
        zebraStripes: {
            description: 'Whether to zebra stripe table rows for easier reading'
        }
    }
} as Meta;

const Template: Story<TableProps> = (args) => {
    return (
        <Table {...args} />
    );
};

export const Sortable = Template.bind({});
Sortable.args = {
    sortable: true,
    header: [
        { value: "Block Hash", isNumeric: false },
        { value: "Previous Hash", isNumeric: false },
        { value: "Block Number", isNumeric: true },
        { value: "Transactions", isNumeric: true },
    ],
    body: [
        [
            { value: <a href="#">bfdaf277514b7cfba12e9a95b5f21f7112536dad0f2fcdaf5347a118d2d5ed5aa</a>, isNumeric: false },
            { value: "N/A", isNumeric: false },
            { value: 120, isNumeric: true },
            { value: 1209, isNumeric: true }
        ],
        [
            { value: <a href="#">5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5</a>, isNumeric: false },
            { value: "bfdaf277514b7cfba12e9a95b5f21f7112536dad0f2fcdaf5347a118d2d5ed5aa", isNumeric: false },
            { value: 121, isNumeric: true },
            { value: 5348, isNumeric: true }
        ],
        [
            { value: <a href="#">b878acd443ca886fae5a6407cd93486ef06ebd20c30751bd3949b6ee604aa2f33</a>, isNumeric: false },
            { value: "5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5", isNumeric: false },
            { value: 122, isNumeric: true },
            { value: 2394, isNumeric: true }
        ],
    ]
};

export const ZebraStriped = Template.bind({});
ZebraStriped.args = {
    zebraStripes: true,
    header: [
        { value: "Block Hash", isNumeric: false },
        { value: "Previous Hash", isNumeric: false },
        { value: "Block Number", isNumeric: true },
        { value: "Transactions", isNumeric: true },
    ],
    body: [
        [
            { value: <a href="#">bfdaf277514b7cfba12e9a95b5f21f7112536dad0f2fcdaf5347a118d2d5ed5aa</a>, isNumeric: false },
            { value: "N/A", isNumeric: false },
            { value: 120, isNumeric: true },
            { value: 1209, isNumeric: true }
        ],
        [
            { value: <a href="#">5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5</a>, isNumeric: false },
            { value: "bfdaf277514b7cfba12e9a95b5f21f7112536dad0f2fcdaf5347a118d2d5ed5aa", isNumeric: false },
            { value: 121, isNumeric: true },
            { value: 5348, isNumeric: true }
        ],
        [
            { value: <a href="#">b878acd443ca886fae5a6407cd93486ef06ebd20c30751bd3949b6ee604aa2f33</a>, isNumeric: false },
            { value: "5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5", isNumeric: false },
            { value: 122, isNumeric: true },
            { value: 2394, isNumeric: true }
        ],
        [
            { value: <a href="#">b878acd443ca886fae5a6407cd93486ef06ebd20c30751bd3949b6ee604aa2f33</a>, isNumeric: false },
            { value: "5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5", isNumeric: false },
            { value: 122, isNumeric: true },
            { value: 2394, isNumeric: true }
        ],
        [
            { value: <a href="#">b878acd443ca886fae5a6407cd93486ef06ebd20c30751bd3949b6ee604aa2f33</a>, isNumeric: false },
            { value: "5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5", isNumeric: false },
            { value: 122, isNumeric: true },
            { value: 2394, isNumeric: true }
        ],
        [
            { value: <a href="#">b878acd443ca886fae5a6407cd93486ef06ebd20c30751bd3949b6ee604aa2f33</a>, isNumeric: false },
            { value: "5b91cca7821d9187d9885e777691db42a592da5273eacc4273e20c0b5b5332f5", isNumeric: false },
            { value: 122, isNumeric: true },
            { value: 2394, isNumeric: true }
        ],
    ]
}

export const Empty = Template.bind({});
Empty.args = {
    header: [
        { value: "Block Hash", isNumeric: false },
        { value: "Previous Hash", isNumeric: false },
        { value: "Block Number", isNumeric: true },
        { value: "Transactions", isNumeric: true },
    ],
};