import { commonProps } from "../../utils/storybook";
import { Link } from "../link";
import { RadioGroup } from ".";

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

const meta: Meta<typeof RadioGroup> = {
  title: "RadioGroup",
  component: RadioGroup,
  tags: ["autodocs"],
  argTypes: {
    options: {
      table: {
        type: {
          detail: `
{label: string}[] |
{label: React.ReactElement<{
  href: string | UrlObject;
  children?: React.ReactNode;
}>}[]
          `,
        },
      },
    },
    asChild: {
      control: false,
    },
    itemProps: {
      control: false,
      table: {
        category: "Anatomy Props",
        type: {
          summary: "React.ComponentProps<typeof RadixRadioGroup.Item>",
        },
      },
    },
    indicatorProps: {
      control: false,
      table: {
        category: "Anatomy Props",
        type: {
          summary: "React.ComponentProps<typeof RadixRadioGroup.Indicator>",
        },
      },
    },
    ...commonProps,
  },
  args: {
    defaultValue: "default",
    options: [
      { id: "1", label: "Default", value: "default" },
      { id: "2", label: "Comfortable", value: "comfortable" },
      { id: "3", label: "Compact", value: "compact" },
    ],
  },
};

export default meta;

type Story = StoryObj<typeof RadioGroup>;

const linkOption: React.ComponentProps<typeof RadioGroup>["options"] = [
  { id: "1", label: <Link href="#1">Default</Link>, value: "default" },
  { id: "2", label: <Link href="#2">Comfortable</Link>, value: "comfortable" },
  { id: "3", label: <Link href="#3">Compact</Link>, value: "compact" },
];

export const Default: Story = {
  render: (args) => (
    <form>
      <RadioGroup {...args} />
    </form>
  ),
};

/**
 * If you make the label a link, it will render as a anchor tag.
 */
export const Links: Story = {
  render: (args) => <RadioGroup {...args} />,
};
Links.args = {
  options: linkOption,
};

/**
 * An `<input>` will also render when used within a form to ensure events propagate correctly.
 */
export const DefaultWithForm: Story = {
  render: (args) => (
    <form>
      <RadioGroup {...args} name="name" />
    </form>
  ),
};

/**
 * An `<input>` will also render when used within a form to ensure events propagate correctly.
 */
export const LinksWithForm: Story = {
  render: (args) => (
    <form>
      <RadioGroup {...args} name="name" />
    </form>
  ),
};
LinksWithForm.args = {
  options: linkOption,
};