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

import Select, { SelectProps } from './Select';
import Block from '../../atoms/Block';
import Button from '../../atoms/Button';
export type SelectOption = Option<string | number | readonly string[] | undefined>;

import { DotMark16 } from '@carbon/icons-react';
import { Option } from '../../atoms/InputSelect/InputSelect';

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

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

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

const Template: Story<SelectProps> = (args) => (
    <Select {...args} name="main" value={options[1]} options={options}></Select>
);

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 Documentation = Example.bind({});
Documentation.args = {
    children: <Block>This is a component for Select that works with single and multi value.</Block>,
    classes: 'flex items-start w-full h-64 space-x-6',
};

export const SingleValueSelect = Example.bind({});
SingleValueSelect.args = {
    children: (
        <Block className="w-full max-w-sm space-y-6">
            <Select placeholder="Has no values" name="show-single" options={[]}></Select>
            <Select placeholder="Your color" name="show-multi" options={[options[3], options[2], options[4]]} />
            <Select
                isClearable
                placeholder="Clearable select"
                name="show-multi"
                options={[options[1], options[2], options[3]]}
            />
        </Block>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};

export const SelectVariations = Example.bind({});
SelectVariations.args = {
    children: (
        <Block className="w-full max-w-sm space-y-6">
            <Select placeholder="Select an option" options={options}></Select>
            <Select placeholder="Select an option" variation="default" options={options}></Select>
            <Select placeholder="Select an option" variation="primary" options={options}></Select>
            <Select placeholder="Select an option" variation="secondary" options={options}></Select>
        </Block>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};

export const DefaultValue = Example.bind({});
DefaultValue.args = {
    children: (
        <Block className="w-full max-w-sm space-y-6">
            <Select
                name="show-single"
                label="Choose wisely"
                message="This is an example message"
                messageClassName="text-red-300"
                defaultValue={options[2]}
                options={options}
                className="test-classname-css"
                containerCss="test-container-css"
            />
        </Block>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};

export const DisabledSelect = Example.bind({});
DisabledSelect.args = {
    children: (
        <Block className="w-full max-w-sm space-y-6">
            <Select isDisabled placeholder="This is a disabled select" isMulti name="show-multi" options={options} />
        </Block>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};

export const MultipleSelect = Example.bind({});
MultipleSelect.args = {
    children: (
        <Block className="w-full max-w-sm space-y-6">
            <Select placeholder="This is a placeholder" isMulti name="show-multi" options={options} />
        </Block>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};

export const RequiredSelect = Example.bind({});
RequiredSelect.args = {
    children: (
        <form
            className="w-full"
            onSubmit={(e) => {
                e.preventDefault();
                alert('Form submitted');
            }}
        >
            <Block className="w-full max-w-sm space-y-6">
                <Select name="test-req" required isClearable placeholder="Select a value ..." options={options} />

                <Select
                    name="test-req-2"
                    label="Choose color *"
                    required
                    isClearable
                    placeholder="Select a value ..."
                    options={options}
                    onChange={(option) => console.log(option)}
                />

                <Select
                    name="test-req-3"
                    label="Choose second color *"
                    required
                    isClearable
                    placeholder="Select a value ..."
                    defaultValue={options[1]}
                    options={options}
                    onChange={(option) => console.log(option)}
                    message="This Select has default value"
                />

                <Button variation="primary">Submit</Button>
            </Block>
        </form>
    ),
    classes: 'flex items-start flex-col w-full h-[640px] space-y-6',
};
