import { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';
import List from '../../list';
import { ListItem } from '../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_MEDIA as MEDIA,
} from '../_stories/subcomponents';
import type { ListItemRadioProps } from './ListItemRadio';
import { fn } from 'storybook/test';
import { ProfileType } from '../../common';

const meta: Meta<ListItemRadioProps> = {
  component: ListItem.Radio,
  title: 'Content/ListItem/ListItem.Radio',
  args: {
    name: 'radio-group',
    value: 'option1',
    checked: false,
    onChange: fn(),
  },
  argTypes: {
    onChange: {
      table: {
        type: { summary: '(value: string | number) => void' },
      },
    },
  },
} satisfies Meta<ListItemRadioProps>;

export default meta;

type Story = StoryObj<ListItemRadioProps>;

export const Playground: Story = {
  render: (args: ListItemRadioProps) => {
    return (
      <List>
        <ListItem
          title="List item with radio"
          subtitle="Select this option"
          media={MEDIA.avatarSingle}
          control={<ListItem.Radio {...args} />}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};

/**
 * Radio controls follow the native HTML behaviour and can be grouped using the `name` prop.
 */
export const RadioGroup: Story = {
  parameters: {
    controls: { disable: true },
  },
  render: function Render() {
    const [selectedValue, setSelectedValue] = useState('2');

    return (
      <List>
        <ListItem
          control={
            <ListItem.Radio
              name="group"
              value="1"
              checked={selectedValue === '1'}
              onChange={setSelectedValue}
            />
          }
          title="First option"
          subtitle="This is the first choice"
          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
        />
        <ListItem
          control={
            <ListItem.Radio
              name="group"
              value="2"
              checked={selectedValue === '2'}
              onChange={setSelectedValue}
            />
          }
          title="Second option"
          subtitle="This is the second choice"
          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
        />
        <ListItem
          control={
            <ListItem.Radio
              name="group"
              value="3"
              checked={selectedValue === '3'}
              onChange={setSelectedValue}
            />
          }
          title="Third option"
          subtitle="This is the third choice"
          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
        />
      </List>
    );
  },
};