import React, { useState } from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { Textarea } from './Textarea';

import styles from './textarea.stories.scss';

export default {
  title: 'ReactComponentLibrary/Textarea',
  component: Textarea,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof Textarea>;

const Template: ComponentStory<typeof Textarea> = (args) => {
  const [value, setValue] = useState(args.value);

  return (
    <div className="centered-layout">
      <Textarea
        {...args}
        value={value}
        onTextChange={(event): void => setValue(event.target.value)}
        inputClassName={styles['input']}
      />
    </div>
  );
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  value: '',
  label: 'Disabled label',
  placeholder: 'Disabled',
};

export const WithValue = Template.bind({});
WithValue.args = {
  value: 'Value',
};

export const WithError = Template.bind({});
WithError.args = {
  label: 'Label',
  value: '123',
  error: 'Error message',
};

export const WithInfo = Template.bind({});
WithInfo.args = {
  label: 'Label',
  value: 'Text content',
  info: 'Info message',
};

export const WithPlaceholder = Template.bind({});
WithPlaceholder.args = {
  placeholder: 'Type...',
};

export const FilledWithLongValue = Template.bind({});
FilledWithLongValue.args = {
  label: 'Long text value',
  value:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet tempus mi, sit amet vestibulum erat. Fusce justo ligula, bibendum sit amet lectus non, viverra ultricies nibh. Morbi ex erat, imperdiet sed tincidunt vitae, accumsan in tellus. Phasellus fringilla vestibulum turpis ut mattis. Praesent efficitur imperdiet eros cursus luctus.',
};