import type { Meta, StoryObj } from '@storybook/react-vite';

import { Textarea } from './Textarea';

const meta: Meta<typeof Textarea> = {
  title: 'UI kit/Form/Inputs/Textarea',
  component: Textarea,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'A multi-line text input component (textarea) with various states, sizes, and additional features like error/warning states and label after text.',
      },
    },
  },
  argTypes: {
    value: {
      control: 'text',
      description: 'The controlled value of the textarea.',
      table: {
        type: { summary: 'string | undefined' },
      },
    },
    defaultValue: {
      control: 'text',
      description: 'The uncontrolled default value of the textarea.',
      table: {
        type: { summary: 'string | undefined' },
      },
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text displayed when the textarea is empty.',
      table: {
        type: { summary: 'string | undefined' },
      },
    },
    width: {
      control: 'select',
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
      description: 'The width size of the textarea.',
      table: {
        type: { summary: 'Size' },
        defaultValue: { summary: 'lg' },
      },
    },
    rows: {
      control: 'number',
      description: 'The number of visible text lines for the textarea.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '4' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the textarea is disabled.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the textarea has an error state.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    warning: {
      control: 'boolean',
      description: 'Whether the textarea has a warning state.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    readOnly: {
      control: 'boolean',
      description: 'Whether the textarea is read-only.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether the textarea is required.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    onChange: { action: 'changed' },
    onFocus: { action: 'focused' },
    onBlur: { action: 'blurred' },
    onKeyDown: { action: 'key pressed' },
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    label: 'Textarea',
    placeholder: 'Enter your message here...',
  },
  parameters: {
    docs: {
      description: {
        story: 'Basic textarea with default styling, large width, and 4 rows.',
      },
    },
  },
};

export const WithDefaultValue: Story = {
  args: {
    label: 'Textarea with default value',
    defaultValue: 'This is the default content of the textarea that appears when the component loads.',
    placeholder: 'Enter your message...',
  },
  parameters: {
    docs: {
      description: {
        story: 'Textarea with pre-filled default content.',
      },
    },
  },
};

// Row Variations
export const TwoRows: Story = {
  args: {
    label: 'Compact textarea',
    rows: 2,
    placeholder: 'Compact textarea with 2 rows',
  },
  parameters: {
    docs: {
      description: {
        story: 'Compact textarea with only 2 visible rows for minimal space usage.',
      },
    },
  },
};

export const SixRows: Story = {
  args: {
    label: 'Expanded textarea',
    rows: 6,
    placeholder: 'Expanded textarea with 6 rows for longer content',
  },
  parameters: {
    docs: {
      description: {
        story: 'Expanded textarea with 6 rows for longer content like detailed descriptions.',
      },
    },
  },
};

export const TenRows: Story = {
  args: {
    label: 'Large textarea',
    rows: 10,
    placeholder: 'Large textarea with 10 rows for extensive content',
  },
  parameters: {
    docs: {
      description: {
        story: 'Large textarea with 10 rows for extensive content like articles or detailed feedback.',
      },
    },
  },
};

export const ErrorState: Story = {
  args: {
    label: 'Textarea in error state',
    placeholder: 'Enter valid content...',
    error: true,
    defaultValue: 'This content has validation errors that need to be addressed.',
  },
  parameters: {
    docs: {
      description: {
        story: 'Textarea in error state, typically used for validation errors.',
      },
    },
  },
};

export const WarningState: Story = {
  args: {
    label: 'Textarea in warning state',
    placeholder: 'Enter content...',
    warning: true,
    defaultValue: 'This content might need some attention or review before proceeding.',
  },
  parameters: {
    docs: {
      description: {
        story: 'Textarea in warning state, used for content that needs attention but is not an error.',
      },
    },
  },
};

export const DisabledState: Story = {
  args: {
    label: 'Disabled textarea',
    placeholder: 'This textarea is disabled',
    disabled: true,
    defaultValue: 'This content cannot be edited because the textarea is disabled.',
  },
  parameters: {
    docs: {
      description: {
        story: 'Textarea in disabled state, preventing all user interaction.',
      },
    },
  },
};

export const ReadOnlyState: Story = {
  args: {
    label: 'Read-only textarea',
    defaultValue:
      'This is read-only content that can be selected and copied but not edited. It might contain important information that should not be changed.',
    readOnly: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'Textarea in read-only state, allowing text selection but preventing editing.',
      },
    },
  },
};