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

import { TextInput } from './TextInput';

const meta: Meta<typeof TextInput> = {
  title: 'UI kit/Form/Inputs/TextInput',
  component: TextInput,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    width: {
      control: { type: 'radio' },
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
    },
    label: {
      control: { type: 'text' },
    },
    error: {
      control: { type: 'boolean' },
    },
    warning: {
      control: { type: 'boolean' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
    readOnly: {
      control: { type: 'boolean' },
    },
    required: {
      control: { type: 'boolean' },
    },
  },
};

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

export const Default: Story = {
  args: {
    label: 'Text input',
    placeholder: 'Enter text here...',
  },
  parameters: {
    docs: {
      description: {
        story: 'Basic text input with default styling and medium width.',
      },
    },
  },
};

export const WithDefaultValue: Story = {
  args: {
    label: 'Text input with default value',
    defaultValue: 'Default text',
    placeholder: 'Enter text here...',
  },
  parameters: {
    docs: {
      description: {
        story: 'Text input with a pre-filled default value.',
      },
    },
  },
};

export const ErrorState: Story = {
  args: {
    label: 'Text input in error state',
    placeholder: 'Enter valid input...',
    error: true,
    defaultValue: 'Invalid input',
  },
  parameters: {
    docs: {
      description: {
        story: 'Text input in error state, typically used for validation errors.',
      },
    },
  },
};

export const WarningState: Story = {
  args: {
    label: 'Text input in warning state',
    placeholder: 'Enter text...',
    warning: true,
    defaultValue: 'Warning: Check this input',
  },
  parameters: {
    docs: {
      description: {
        story: 'Text input in warning state, used for values that need attention but are not errors.',
      },
    },
  },
};

export const DisabledState: Story = {
  args: {
    label: 'Disabled text input',
    placeholder: 'Disabled input',
    disabled: true,
    defaultValue: 'Cannot edit this',
  },
  parameters: {
    docs: {
      description: {
        story: 'Text input in disabled state, preventing user interaction.',
      },
    },
  },
};

export const ReadOnlyState: Story = {
  args: {
    label: 'Read-only text input',
    defaultValue: 'Read-only content',
    readOnly: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'Text input in read-only state, allowing selection but not editing.',
      },
    },
  },
};