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

import { CalendarProps } from './Calendar';
import Block from '../../atoms/Block';
import Calendar from '.';

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

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

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

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 MaxWidth = Example.bind({});
MaxWidth.args = {
    children: <Calendar />,
    classes: 'w-full max-w-xs',
};

export const MinDate = Example.bind({});
MinDate.args = {
    children: <Calendar minDate={new Date()} />,
    classes: 'w-full max-w-xs',
};

export const Variations = Example.bind({});
Variations.args = {
    children: (
        <>
            <Block className="w-full max-w-xs">
                <Calendar />
            </Block>

            <Block className="w-full max-w-xs">
                <Calendar variation="primary" />
            </Block>

            <Block className="w-full max-w-xs">
                <Calendar variation="secondary" />
            </Block>
        </>
    ),
    classes: 'flex flex-col justify-center items-center w-full space-y-6',
};
