import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { RadioButtonGroup, RadioButtonGroupProps } from "./RadioButtonGroup"

type Story = StoryObj<typeof RadioButtonGroup>

const meta: Meta<typeof RadioButtonGroup> = {
  title: "Design System/RadioButtonGroup",
  component: RadioButtonGroup,
  args: {
    defaultValue: "option-one",
    children: (
      <>
        <RadioButtonGroup.Item id="option-one" value="option-one">
          <RadioButtonGroup.Item.Content>
            <RadioButtonGroup.Item.Title>
              Option one
            </RadioButtonGroup.Item.Title>
            <RadioButtonGroup.Item.Description>
              Option one is the best option
            </RadioButtonGroup.Item.Description>
          </RadioButtonGroup.Item.Content>
        </RadioButtonGroup.Item>
        <RadioButtonGroup.Item id="option-two" value="option-two">
          <RadioButtonGroup.Item.Content>
            <RadioButtonGroup.Item.Title>
              Option two
            </RadioButtonGroup.Item.Title>
            <RadioButtonGroup.Item.Description>
              Option two is also a good choice
            </RadioButtonGroup.Item.Description>
          </RadioButtonGroup.Item.Content>
        </RadioButtonGroup.Item>

        <RadioButtonGroup.Item id="option-three" value="option-three">
          <RadioButtonGroup.Item.Content>
            <RadioButtonGroup.Item.Title>
              Option three
            </RadioButtonGroup.Item.Title>
            <RadioButtonGroup.Item.Description>
              Option three is not as good
            </RadioButtonGroup.Item.Description>
          </RadioButtonGroup.Item.Content>
        </RadioButtonGroup.Item>
      </>
    ),
  },
}

export default meta

const Template = (args: RadioButtonGroupProps) => {
  const [value, setValue] = useState<string | undefined>()

  return <RadioButtonGroup value={value} onValueChange={setValue} {...args} />
}

export const Default: Story = {
  render: Template,
}

export const DisabledGroup: Story = {
  render: Template,
  args: {
    disabled: true,
  },
}

export const DisabledItem: Story = {
  render: Template,
  args: {
    children: (
      <>
        <RadioButtonGroup.Item id="option-one" value="option-one">
          <RadioButtonGroup.Item.Content>
            <RadioButtonGroup.Item.Title>
              Option one
            </RadioButtonGroup.Item.Title>
            <RadioButtonGroup.Item.Description>
              Option one is the best option
            </RadioButtonGroup.Item.Description>
          </RadioButtonGroup.Item.Content>
        </RadioButtonGroup.Item>
        <RadioButtonGroup.Item disabled id="option-two" value="option-two">
          <RadioButtonGroup.Item.Content>
            <RadioButtonGroup.Item.Title>
              Option two
            </RadioButtonGroup.Item.Title>
            <RadioButtonGroup.Item.Description>
              Option two is disabled
            </RadioButtonGroup.Item.Description>
          </RadioButtonGroup.Item.Content>
        </RadioButtonGroup.Item>
      </>
    ),
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <RadioButtonGroup {...meta.args} {...Default.args} />
        <RadioButtonGroup {...meta.args} {...DisabledGroup.args} />
        <RadioButtonGroup {...meta.args} {...DisabledItem.args} />
      </TestGridContainer>
    )
  },
}