import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Typography } from '../Typography'
import { RadioGroup, RadioGroupItem } from './RadioGroup'

const meta: Meta<typeof RadioGroup> = {
  title: 'Form/RadioGroup',
  component: RadioGroup,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    onValueChange: { action: 'value changed' },
  },
  args: {
    onValueChange: undefined,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: any) => (
    <RadioGroup {...args}>
      <RadioGroupItem value="option-one">Option One</RadioGroupItem>
      <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
      <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
    </RadioGroup>
  ),
}

export const Disabled: Story = {
  args: {
    defaultValue: 'option-one',
  },
  render: (args: any) => (
    <RadioGroup {...args}>
      <RadioGroupItem value="option-one" disabled>
        Option One (Disabled checked)
      </RadioGroupItem>
      <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
      <RadioGroupItem value="option-three" disabled>
        Option Three (Disabled)
      </RadioGroupItem>
    </RadioGroup>
  ),
}

export const WithError: Story = {
  args: {
    defaultValue: 'option-one',
  },
  render: (args: any) => (
    <RadioGroup {...args}>
      <RadioGroupItem value="option-one" error>
        Option One (Error Checked)
      </RadioGroupItem>
      <RadioGroupItem value="option-two" error>
        Option Two (Error Unchecked)
      </RadioGroupItem>
      <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
    </RadioGroup>
  ),
}

export const WithGroupError: Story = {
  args: {
    defaultValue: undefined,
    error: 'Please select an option',
  },
  render: (args: any) => (
    <RadioGroup {...args}>
      <RadioGroupItem value="option-one">Option One</RadioGroupItem>
      <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
      <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
    </RadioGroup>
  ),
}

export const WithItemErrorMessage: Story = {
  args: {
    defaultValue: 'option-one',
  },
  render: (args: any) => (
    <RadioGroup {...args}>
      <RadioGroupItem value="option-one" error="Please select a valid option">
        Option One
      </RadioGroupItem>
      <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
      <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
    </RadioGroup>
  ),
}

export const Controlled = ({ initialValue }: { initialValue?: string }) => {
  const [value, setValue] = useState(initialValue || 'option-one')

  return (
    <div className="space-y-4">
      <RadioGroup value={value} onValueChange={setValue}>
        <RadioGroupItem value="option-one">Option One</RadioGroupItem>
        <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
        <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
      </RadioGroup>
      <Typography variant="body-s" color="muted">
        Selected value: {value}
      </Typography>
    </div>
  )
}