import { boolean, text } from '@storybook/addon-knobs';
import { Flag } from '@wise/art';
import { useState } from 'react';

import Avatar, { AvatarType } from '../avatar';
import Checkbox from '../checkbox';

import Radio from './Radio';

export default {
  component: Radio,
  title: 'Forms/Radio',
};

export const Basic = () => {
  const [checked, setChecked] = useState(true);

  const disabled = boolean('disabled', false);
  const label = text('label', 'This is the label');
  const secondary = text('secondary', '');
  const showAvatar = boolean('avatar', false);
  const hasError = boolean('hasError', false);

  return (
    <>
      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
        <Radio
          label={label}
          name="name"
          id="id"
          checked={checked}
          disabled={disabled}
          avatar={
            showAvatar ? (
              <Avatar type={AvatarType.THUMBNAIL}>
                <Flag code="IMP" />
              </Avatar>
            ) : null
          }
          onChange={() => setChecked(!checked)}
        />
      </div>
      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
        <Radio
          label={label}
          name="name"
          id="id1"
          checked={checked}
          disabled={disabled}
          secondary={secondary}
          avatar={
            showAvatar ? (
              <Avatar type={AvatarType.THUMBNAIL}>
                <Flag code="KES" />
              </Avatar>
            ) : null
          }
          onChange={() => setChecked(!checked)}
        />
      </div>
      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
        <Checkbox
          label={label}
          id="id2"
          checked={checked}
          disabled={disabled}
          secondary={secondary}
          onChange={() => setChecked(!checked)}
        />
      </div>
      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
        <Checkbox
          label={label}
          id="id3"
          checked={checked}
          disabled={disabled}
          onChange={() => setChecked(!checked)}
        />
      </div>
    </>
  );
};
