import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { Checkbox } from '../../src/checkbox/checkbox';
import { useState } from 'react';

<Meta
    title="Components/Checkbox"
    component={Checkbox}
    argTypes={{
        color: {
            options: ['primary', 'secondary', 'tertiary'],
        },
        variant: {
            options: ['raised', 'outlined']
        },
    }}
/>

export const Template = (args) => {
    const [checked, setChecked] = useState(args.checked);
    return (
        <Checkbox
            {...args}
            checked={checked}
            onChange={() => {
                console.log('clicked');
                setChecked(!checked);
            }}
        />
    );
};

# Checkbox

<Canvas>
    <Story
        name="Unchecked"
        args={{
            checked: false,
            size: 'small',
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Checked/NoColor"
        args={{
            checked: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Secondary"
        args={{
            color: 'secondary',
            checked: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Disabled"
        args={{
            color: 'secondary',
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Disabled/Checked"
        args={{
            color: 'secondary',
            checked: true,
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Partial"
        args={{
            partialCheck: true,
            checked: false,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Radio"
        args={{
            isRadio: true,
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Outlined"
        args={{
            color: 'secondary',
            checked: true,
            variant: 'outlined',
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Outlined-Disabled"
        args={{
            color: 'secondary',
            checked: true,
            disabled: true,
            variant: 'outlined',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

<ArgsTable of={Checkbox} />