import type { Meta, StoryObj } from '@storybook/react'
import { createSizeDecorator } from '../../utils/decorators'
import { Card } from '../Card'
import { INPUT_SIZE_OPTIONS, INPUT_WIDTH_OPTIONS, Input } from './Input'

const meta = {
  title: 'Form/Input/Primitive',
  component: Input,
  decorators: [createSizeDecorator('XS')],
  argTypes: {
    width: {
      control: 'select',
      options: INPUT_WIDTH_OPTIONS,
      table: {
        type: {
          summary: INPUT_WIDTH_OPTIONS.map((value) => value).join(' | '),
        },
        defaultValue: { summary: 'responsive' },
      },
    },
    size: {
      control: {
        type: 'select',
      },
      options: INPUT_SIZE_OPTIONS,
      table: {
        type: {
          summary: INPUT_SIZE_OPTIONS.map((value) => value).join(' | '),
        },
        defaultValue: { summary: 'default' },
      },
    },
    error: {
      description: 'Error state.',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    type: {
      control: 'text',
      defaultValue: 'text',
      description: 'Specifies the type of the input element.',
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text for the input field.',
    },
    disabled: {
      control: 'boolean',
      defaultValue: false,
      description: 'Disables the input if set to true.',
    },
  },
} satisfies Meta<typeof Input>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => <Input placeholder="Placeholder" type="text" />,
}

export const Small: Story = {
  render: (_args) => <Input placeholder="Small input" size="sm" type="text" />,
}

export const Xs: Story = {
  render: (_args) => (
    <Input placeholder="Extra small input" size="xs" type="text" />
  ),
}

export const Disabled: Story = {
  args: {
    placeholder: 'Disabled',
    size: 'default',
    error: false,
    type: 'text',
    disabled: true,
  },
}

export const ErrorState: Story = {
  args: {
    placeholder: 'Error State',
    size: 'default',
    error: true,
    type: 'text',
    disabled: false,
  },
}
export const Number: Story = {
  args: {
    placeholder: 'Error State',
    size: 'default',
    error: false,
    type: 'number',
    disabled: false,
  },
}

export const Widths: Story = {
  render: (args) => (
    <Card className="flex min-w-[360px] flex-col gap-4 p-6">
      <Input {...args} width="responsive" placeholder="Responsive (default)" />
      <Input {...args} width="full" placeholder="Full" />
      <Input {...args} width="hug" placeholder="Hug" />
    </Card>
  ),
  args: {
    placeholder: 'Responsive (default)',
    type: 'text',
  },
}