import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
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 Sandbox = createSandboxStory({
  code: `const App = () => {
  const [selected, setSelected] = React.useState('option1');

  return (
    <>
      <Radio
        label="Standard delivery"
        secondary="3-5 business days"
        name="delivery"
        id="radio-standard"
        value="option1"
        checked={selected === 'option1'}
        onChange={() => setSelected('option1')}
      />
      <Radio
        label="Express delivery"
        secondary="1-2 business days"
        name="delivery"
        id="radio-express"
        value="option2"
        checked={selected === 'option2'}
        onChange={() => setSelected('option2')}
      />
    </>
  );
};`,
  scope: globalScope,
});

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="IM" />
              </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>
      </>
    );
  },
};
