import React from 'react';
import { BrowserRouter } from 'react-router-dom'

import { Table } from '../components/Table';

export default {
    title: 'Design System/Table',
    component: Table
};

const Template = (args) => <BrowserRouter><div style={{maxWidth: '800px'}}><Table {...args} /></div></BrowserRouter>;

export const Filled = Template.bind({});
Filled.args = {
    width: 900,
    height: 300,
    columns: [
        {
            header: 'First name',
            accessor: 'first',
            index: true
        },
        {
            header: 'Last name',
            accessor: 'last',
        },
        {
            header: 'Email',
            accessor: 'email'
        },
        {
            header: 'Age',
            accessor: 'age'
        },
        {
            header: '',
            accessor: 'manage',
        }
    ],
    data: [
        {
            first: 'John',
            last: 'Doe',
            email: 'johndoe@gmail.com',
            age: 24,
            manage: {
                text: 'Manage',
                link: '/'
            }
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69,
            manage: {
                text: 'Manage',
                link: '/'
            }
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69,
            manage: {
                text: 'Manage',
                link: '/'
            }
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69,
            manage: {
                text: 'Manage',
                link: '/'
            }
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69,
            manage: {
                text: 'Manage',
                link: '/'
            }
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69,
            manage: {
                text: 'Manage',
                link: '/'
            }
        }
    ]
};

export const Empty = Template.bind({});
Empty.args = {
    columns: [
        {
            header: 'First name',
            accessor: 'first'
        },
        {
            header: 'Last name',
            accessor: 'last'
        },
        {
            header: 'Email',
            accessor: 'email'
        }
    ],
    data: [],
    empty: 'No data to be seen'
};

export const WithName = Template.bind({});
WithName.args = {
    name: "Users",
    columns: [
        {
            header: 'First name',
            accessor: 'first'
        },
        {
            header: 'Last name',
            accessor: 'last'
        },
        {
            header: 'Email',
            accessor: 'email'
        }
    ],
    data: [],
    empty: 'No data to be seen'
};


