import { SfTextarea } from '@borngroup/lightswitch-storefront-ui-vue';

export default {
    title: 'Components/Atoms/Textarea',
    component: SfTextarea,
    argTypes: {
        value: {
            control: 'text',
            defaultValue: '',
            table: {
                category: 'Props',
            },
        },
        label: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        name: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        cols: {
            control: 'number',
            table: {
                category: 'Props',
            },
        },
        rows: {
            control: 'number',
            table: {
                category: 'Props',
            },
        },
        minlength: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        maxlength: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        wrap: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        errorMessage: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        valid: {
            control: 'boolean',
            defaultValue: true,
            table: {
                category: 'Props',
            },
        },
        required: {
            control: 'boolean',
            defaultValue: false,
            table: {
                category: 'Props',
            },
        },
        disabled: {
            control: 'boolean',
            defaultValue: false,
            table: {
                category: 'Props',
            },
        },
        placeholder: {
            control: 'text',
            table: {
                category: 'Props',
            },
        },
        change: { action: 'Text area changed', table: { category: 'Events' } },
        click: { action: 'Text area focus', table: { category: 'Events' } },
    },
};

const Template = (args, { argTypes }) => ({
    components: { SfTextarea },
    props: Object.keys(argTypes),
    data() {
        return {
            textArea: this.value,
        };
    },
    template: `
  <SfTextarea
    v-model="textArea"
    :cols="cols"
    :rows="rows"
    :minlength="minlength"
    :maxlength="maxlength"
    :label="label"
    :name="name"
    :wrap="wrap"
    :valid="valid"
    :error-message="errorMessage"
    :required="required"
    :disabled="disabled"
    :placeholder="placeholder"
    @click="click"
    @change="change"
  />`,
});

export const Common = Template.bind({});

Common.args = {
    label: 'First name',
    name: 'first-name',
    cols: 40,
    rows: 10,
    wrap: 'soft',
    errorMessage: 'Required',
};
