import React from 'react';

import { Sidebar } from '../components/Sidebar'

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

import { ArrowLeft, Settings } from 'react-feather';


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

const Template = (args) => <BrowserRouter><Sidebar {...args} /></BrowserRouter>;

export const Full = Template.bind({});
Full.args = {
    title: 'Acme',
    width: 300,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ],
    sectionTwo: [
        {
            active: false,
            text: 'Documentation', 
            link: '/documentation'
        }
    ],
    icons: [
        {
            icon: <ArrowLeft width={28} />,
            link: '/logout'
        },
        {
            icon: <Settings width={28} />,
            link: '/settings'
        }
    ]
};

export const WithLogo = Template.bind({});
WithLogo.args = {
    logo: 'https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_RGB_Black.png',
    width: 300,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ],
    icons: [
        {
            icon: <ArrowLeft width={28} />,
            link: '/logout'
        },
        {
            icon: <Settings width={28} />,
            link: '/settings'
        }
    ]
};

export const OnlySectionOne = Template.bind({});
OnlySectionOne.args = {
    title: 'Acme',
    width: 300,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ]
};

export const TwoSections = Template.bind({});
TwoSections.args = {
    title: 'Acme',
    width: 300,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ],
    sectionTwo: [
        {
            active: false,
            text: 'Documentation', 
            link: '/documentation'
        }
    ],
};

export const SectionOneWithIcons = Template.bind({});
SectionOneWithIcons.args = {
    title: 'Acme',
    width: 300,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ],
    icons: [
        {
            icon: <ArrowLeft width={28} />,
            link: '/logout'
        },
        {
            icon: <Settings width={28} />,
            link: '/settings'
        }
    ]
};

export const CustomWidth = Template.bind({});
CustomWidth.args = {
    title: 'Acme',
    width: 400,
    sectionOne: [
        {
            active: true,
            text: 'Dashboard',
            link: '/dashboard'
        },
        {
            active: false,
            text: 'Transactions',
            link: '/transactions'
        },
        {
            active: false,
            text: 'Payments',
            link: '/payments'
        }
    ],
    icons: [
        {
            icon: <ArrowLeft width={28} />,
            link: '/logout'
        },
        {
            icon: <Settings width={28} />,
            link: '/settings'
        }
    ]
};

