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

import { Icon } from '../iconography';
import { InlineRadio } from './inline-radio';

const meta: Meta<typeof InlineRadio.Group> = {
  title: 'Components/InlineRadio',
  component: InlineRadio.Group,
  argTypes: {
    size: {
      defaultValue: 'sm',
    },
  },
};

export default meta;

type Story = StoryObj<typeof InlineRadio.Group>;

export const Example: Story = {
  render: () => {
    return (
      <InlineRadio.Group defaultValue="plus" size="xs">
        <InlineRadio.Item value="plus" id="example-r1">
          +
        </InlineRadio.Item>
        <InlineRadio.Item value="minus" id="example-r2">
          -
        </InlineRadio.Item>
      </InlineRadio.Group>
    );
  },
};

export const ProductView: Story = {
  render: () => {
    return (
      <InlineRadio.Group defaultValue="pretty" size="xs">
        <InlineRadio.Item value="pretty" id="productview-r1">
          <Icon.NailPolish />
        </InlineRadio.Item>
        <InlineRadio.Item value="nerdy" id="productview-r2">
          <Icon.Glasses />
        </InlineRadio.Item>
      </InlineRadio.Group>
    );
  },
};

export const Controlled: Story = {
  render: () => {
    const [view, setView] = useState('pretty');

    return (
      <InlineRadio.Group value={view} onValueChange={v => setView(v)} size="xs">
        <InlineRadio.Item value="pretty" id="controlled-r1">
          <Icon.NailPolish />
        </InlineRadio.Item>
        <InlineRadio.Item value="nerdy" id="controlled-r2">
          <Icon.Glasses />
        </InlineRadio.Item>
      </InlineRadio.Group>
    );
  },
};

export const WithSize: Story = {
  render: ({ size }) => {
    return (
      <InlineRadio.Group defaultValue="preview" size={size}>
        <InlineRadio.Item value="preview" id="controlled-r1">
          Preview
        </InlineRadio.Item>
        <InlineRadio.Item value="edit" id="controlled-r2">
          Edit
        </InlineRadio.Item>
      </InlineRadio.Group>
    );
  },
};
