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

import { Input } from './Input'
import { TextField } from 'react-aria-components'

const meta: Meta<typeof Input> = {
  title: 'Components/Input',
  component: ({ isInvalid, ...props }) => (
    <TextField isInvalid={isInvalid}>
      <Input {...props} />
    </TextField>
  ),
  argTypes: {},
}

export default meta

type Story = StoryObj<typeof Input>

export const Default: Story = {
  args: {
    label: 'Label',
    name: 'foo',
    required: false,
  },
}

export const Filled: Story = {
  args: {
    label: 'Label',
    name: 'foo',
    value: 'Value',
  },
}

export const Error: Story = {
  args: {
    label: 'Label',
    name: 'foo',
    // @ts-expect-error Input does not support this, but wrapping <TextField> does
    isInvalid: true,
  },
}

export const Disabled: Story = {
  args: {
    label: 'Label',
    name: 'foo',
    disabled: true,
  },
}

export const DisabledFilled: Story = {
  args: {
    label: 'Label',
    name: 'foo',
    disabled: true,
    value: 'Value',
  },
}