import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { TextField } from '../../src/text_field/text_field';
import { useState } from 'react';

<Meta title="Components/TextField" component={TextField} />

export const Template = (args) => {
    const [value, setValue] = useState(args.value ?? 'Textfield value');
    return <TextField value="Textfield value" {...args} onChange={(e) => setValue(e.target.value)} value={value} />;
};

# Regular

Test

<Canvas>
    <Story name="Regular">{Template.bind({})}</Story>
    <Story
        name="Regular/Disabled"
        args={{
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Flat

<Canvas>
    <Story
        name="Flat"
        args={{
            variant: 'flat',
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Disabled"
        args={{
            variant: 'flat',
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Underlined

<Canvas>
    <Story
        name="Underlined"
        args={{
            variant: 'underlined',
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Underlined/Disabled"
        args={{
            variant: 'underlined',
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Placeholder

<Canvas>
    <Story
        name="Placeholder"
        args={{
            value: '',
            placeholder: 'Placeholder',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Small

<Canvas>
    <Story
        name="Small"
        args={{
            size: 'small',
            variant: 'flat',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Password

<Canvas>
    <Story
        name="Password"
        args={{
            type: 'password',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Multiline

<Canvas>
    <Story
        name="Multiline"
        args={{
            multiline: true,
            rows: 4,
            value: 'Coucou\nCoucou\nCoucou\nCoucou\nCoucou\nCoucou\nCoucou\nCoucou\n',
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Added classes

<Canvas>
    <Story
        name="Added classes"
        args={{
            classes: {
                container: 'ds-p-8',
                input: 'ds-italic',
            },
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>