import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';
import Radio, { type RadioProps } from './Radio';
import AvatarView from '../avatarView';
import { Flag } from '@wise/art';
import { fn } from 'storybook/test';

const meta: Meta<RadioProps> = {
  component: Radio,
  title: 'Forms/Radio',
  argTypes: {
    disabled: { control: 'boolean' },
  },
};
export default meta;

export const Basic: StoryObj<RadioProps> = {
  render: (args) => {
    return <Radio {...args} value="option1" onChange={fn()} />;
  },
  args: {
    checked: false,
    disabled: false,
    label: 'Without Avatar',
    name: 'name',
    secondary: 'This is secondary text',
    id: 'radioGroup1',
    value: 'option1',
  },
};
export const Variants: StoryObj<RadioProps> = {
  render: () => {
    const [selectedValue, setSelectedValue] = useState('option1');

    return (
      <>
        <div className={`form-group ${selectedValue === 'option1' ? 'has-error' : ''}`}>
          <Radio
            label="Without Avatar"
            name="name"
            secondary="This is secondary text"
            id="radioGroup1"
            value="option1"
            checked={selectedValue === 'option1'}
            onChange={() => setSelectedValue('option1')}
          />
        </div>
        <div className="form-group">
          <Radio
            label="With Avatar"
            name="name"
            id="radioGroup2"
            avatar={
              <AvatarView>
                <Flag code="IMP" />
              </AvatarView>
            }
            value="option2"
            checked={selectedValue === 'option2'}
            onChange={() => setSelectedValue('option2')}
          />
        </div>
        <div className="form-group">
          <Radio label="Disabled" name="name" id="radioGroup3" disabled value="option3" />
        </div>
      </>
    );
  },
};