import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import TextArea from './TextArea';

const meta: Meta<typeof TextArea> = {
  title: 'Components/TextArea',
  component: TextArea,
  argTypes: { variant: { control: { type: 'select' } } },
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
};

type Story = StoryObj<typeof TextArea>;
const defaultArgs = {
  placeholder: 'Enter your comments',
  labelProps: { label: 'TextArea' },
  variant: 'default',
  disabled: false,
  required: false,
};

export const Default: Story = {
  args: {
    ...defaultArgs,
    variant: 'default',
  },
};

export const Success: Story = {
  args: {
    ...defaultArgs,
    variant: 'success',
  },
};

export const Danger: Story = {
  args: {
    ...defaultArgs,
    variant: 'danger',
  },
};

export const Controlled: Story = {
  render: () => {
    const [value, setValue] = useState('');

    const [error, setError] = useState('');

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
      setValue(e.target.value);
      if (e.target.value.length <= 20) {
        setError('Please enter minimum 20 characters');
      } else {
        setError('');
      }
    };
    return (
      <TextArea
        placeholder="Enter your comments"
        labelProps={{ label: 'TextArea' }}
        variant="controlled"
        disabled={false}
        required={true}
        value={value}
        onChange={handleChange}
        capacity={200}
        error={error}
      />
    );
  },
};

export default meta;