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

import { SelectOption } from '../../elements/Select/Select';

import { SideBar, Block, Button, Select, Text, Input, style } from '../../../';

import { DotMark, Chat, TrashCan, UserAdmin } from '@carbon/icons-react';

export default {
    title: 'Component/Compounds/Sidebar',
    component: SideBar,
    parameters: {
        component: SideBar,
        previewTabs: {
            canvas: {
                hidden: true,
            },
        },
        viewMode: 'docs',
    },
} as Meta;

interface ExampleProps {
    children?: React.ReactNode;
    classes: string;
}

const options: SelectOption[] = [
    {
        value: 'yellow',
        label: 'Yellow',
        icon: <DotMark size={16} className="text-yellow-700" />,
    },
    {
        value: 'blue',
        label: 'Blue',
        icon: <DotMark size={16} className="text-blue-700" />,
    },
    {
        value: 'green',
        label: 'Green',
        icon: <DotMark size={16} className="text-green-700" />,
    },
    {
        value: 'pink',
        label: 'Pink',
        icon: <DotMark size={16} className="text-pink-700" />,
    },
    {
        value: 'purple',
        label: 'Purple',
        icon: <DotMark size={16} className="text-purple-700" />,
    },
    {
        value: 'orange',
        label: 'Orange',
        icon: <DotMark size={16} className="text-orange-700" />,
    },
    {
        value: 'gray',
        label: 'Gray',
        icon: <DotMark size={16} className="text-gray-700" />,
    },
    {
        value: 'indigo',
        label: 'Indigo',
        icon: <DotMark size={16} className="text-yellow-700" />,
    },
    {
        value: 'white',
        label: 'White',
        icon: <DotMark size={16} className="text-white" />,
    },
    {
        value: 'magenta',
        label: 'Magenta',
        icon: <DotMark size={16} className="text-pink-700" />,
    },
];

const Template: Story = (args) => <SideBar {...args}></SideBar>;

const Example: Story<ExampleProps> = (args) => {
    const classes = args.classes;
    return classes ? <Block className={args.classes}>{args.children}</Block> : <>{args.children}</>;
};

export const Properties = Template.bind({});
Properties.args = {};

export const Types = Example.bind({});
Types.args = {
    children: (
        <Block className="relative flex w-full">
            <SideBar
                logo={
                    <a
                        href={'/'}
                        className="flex items-center justify-start w-full pt-6 pb-4 pl-10 focus:outline-none hover:bg-secondary hover:bg-opacity-30"
                    >
                        <img className={`w-12`} src={'assets/logo.svg'} alt="FieldNode" />
                        <Block className="flex flex-col ml-4">
                            <span className="text-xl tracking-wider">Fieldnode</span>
                            <span className="text-xs opacity-50">Digital inventory</span>
                        </Block>
                    </a>
                }
                className="max-w-md"
            >
                <Button className={style.sideBar.menuItem.root}>Menu item</Button>
                <Button className={style.sideBar.menuItem.root}>Menu item</Button>
                <Button className={style.sideBar.menuItem.root + style.sideBar.menuItem.selected}>Menu item</Button>
                <Button className={style.sideBar.menuItem.root}>Menu item</Button>
                <Button className={style.sideBar.menuItem.root}>Menu item</Button>
                <Block className="px-8 mt-8">
                    <Text className="pb-2 text-sm">Search ...</Text>
                    <Input variation="default" placeholder="Input key words ..." />
                    <Text className="pb-2 mt-6 text-sm">Select a color</Text>
                    <Select variation="default" value={options[0]} options={options} />
                </Block>
                <Block className="flex items-end flex-auto mt-10">
                    <Button className="justify-center flex-auto py-3" variation="primary">
                        Save
                    </Button>
                    <Button className="justify-center flex-auto py-3" variation="secondary">
                        Cancel
                    </Button>
                </Block>
            </SideBar>
            <Block className="flex-auto h-screen px-12 py-8 text-white bg-gray-700">Content</Block>
        </Block>
    ),
    classes: 'flex items-start w-full h-screen',
};

export const Collapsed = Example.bind({});
Collapsed.args = {
    children: (
        <Block className="relative flex w-full">
            <SideBar
                logo={
                    <a
                        href={'/'}
                        className="flex items-center justify-start w-full p-2 pt-6 mb-3 focus:outline-none hover:bg-black hover:bg-opacity-30"
                    >
                        <img className={`w-12`} src={'assets/logo.svg'} alt="FieldNode" />
                    </a>
                }
                setExpanded={() => {}}
                expanded={false}
                className="min-w-[48px]"
            >
                <Block className="flex flex-col">
                    <Block className={style.sideBar.menuItem.root + ' ' + 'px-3'} title="Conversations">
                        <Chat size={16} />
                    </Block>
                    <Block className={style.sideBar.menuItem.root + ' ' + 'px-3'} title="Deleted Threads">
                        <TrashCan size={16} />
                    </Block>
                    <Block className={style.sideBar.menuItem.root + ' ' + 'px-3'} title="Admin Panel">
                        <UserAdmin size={16} />
                    </Block>
                </Block>
            </SideBar>
            <Block className="flex-auto h-screen px-12 py-8 text-white bg-gray-700">Content</Block>
        </Block>
    ),
    classes: 'flex items-start w-full h-screen',
};
