import React from 'react';
import TextArea, { TextAreaProps } from '../components/Forms/TextArea';
import { Story } from '@storybook/react';

export default {
  title: 'Forms / TextArea',
  component: TextArea,
};

const Template: Story<TextAreaProps> = (args) => (
  <div>
    <TextArea {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
};

export const Rows = Template.bind({});
Rows.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  rows: 15,
};

export const Error = Template.bind({});
Error.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  rows: 15,
  error: 'Some error here',
};