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

import Button, { ButtonProps } from './Button';
import Block from '../Block/Block';

import { ChevronDown } from '@carbon/icons-react';

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

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

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

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: (
        <>
            <Button>Initial</Button>
            <Button variation="default">Default</Button>
            <Button variation="primary">Primary</Button>
            <Button variation="secondary">Secondary</Button>
        </>
    ),
    classes: 'h-64 flex justify-center items-center space-x-6 w-full',
};

export const Disabled = Example.bind({});
Disabled.args = {
    children: (
        <>
            <Button disabled>Button</Button>
            <Button disabled variation="default">
                Button
            </Button>
            <Button disabled variation="primary">
                Button
            </Button>
            <Button disabled variation="secondary">
                Button
            </Button>
        </>
    ),
    classes: 'h-64 flex justify-center items-center space-x-6 w-full',
};

export const Sizes = Example.bind({});
Sizes.args = {
    children: (
        <Block className="flex items-center justify-center w-full h-64 space-x-6">
            <Button variation="primary" className="px-3 py-1 text-xs">
                Button
            </Button>
            <Button variation="primary" className="px-3 py-1 text-sm">
                Button
            </Button>
            <Button variation="primary">Button</Button>
            <Button variation="primary" className="text-lg">
                Button
            </Button>

            <Button variation="primary" className="px-10 text-2xl">
                Button
            </Button>

            <Button variation="primary" className="px-12 text-4xl">
                Button
            </Button>
        </Block>
    ),
    classes: undefined,
};

export const Grouped = Example.bind({});
Grouped.args = {
    children: (
        <Block className="flex">
            <Button variation="default">Default</Button>
            <Button variation="primary">Primary</Button>
            <Button variation="secondary">Secondary</Button>
        </Block>
    ),
    classes: 'h-64 flex justify-center items-center space-x-0 w-full',
};

export const WithIcons = Example.bind({});
WithIcons.args = {
    children: (
        <>
            <Button>
                Button
                <ChevronDown className="ml-2" size={24} />
            </Button>

            <Button variation="default">
                Button
                <ChevronDown className="ml-2" size={24} />
            </Button>

            <Button variation="primary">
                Button
                <ChevronDown className="ml-2" size={24} />
            </Button>

            <Button variation="secondary">
                Button
                <ChevronDown className="ml-2" size={24} />
            </Button>
        </>
    ),
    classes: 'h-64 flex justify-center items-center space-x-0 w-full flex space-x-6',
};

export const Justified = Example.bind({});
Justified.args = {
    children: (
        <Block className="flex flex-auto w-full h-24">
            <Button variation="default" className="flex-auto">
                Default
            </Button>
            <Button variation="primary" className="flex-auto">
                Primary
            </Button>
            <Button variation="secondary" className="flex-auto">
                Secondary
            </Button>
        </Block>
    ),
    classes: undefined,
};

export const Aligned = Example.bind({});
Aligned.args = {
    children: (
        <Block className="flex items-center flex-auto w-full h-64">
            <Button variation="default" className="justify-center flex-auto">
                Default
            </Button>
            <Button variation="primary" className="justify-center flex-auto">
                Primary
            </Button>
            <Button variation="secondary" className="justify-center flex-auto">
                Secondary
            </Button>
        </Block>
    ),
    classes: undefined,
};
