import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';
import { useState } from 'react';

import { Header, Nudge, Section, Title, Typography } from '..';

import RadioOption, { RadioOptionProps } from './RadioOption';

export default {
  component: RadioOption,
  title: 'Option/RadioOption',
};

const Template = (props: Partial<RadioOptionProps>) => {
  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
  const title = text('title', 'title');
  const disabled = boolean('disabled', false);
  const content = text('content', 'content');
  const isContainerAligned = boolean('isContainerAligned', false);

  return (
    <RadioOption
      media={<FastFlagIcon />}
      title={title}
      content={content}
      id="id"
      name="radio-option"
      checked={props.checked}
      complex={false}
      disabled={disabled}
      value="value"
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      onChange={(value) => {
        action('checked');
        props.onChange?.(value);
      }}
    />
  );
};

export const Basic = () => {
  const checked = boolean('checked', false);

  return <Template checked={checked} />;
};

export const Multiple = () => {
  const [selected, setSelected] = useState(0);

  return (
    <Section as="fieldset">
      <Header as="legend" title="Test title" />
      <Template checked={selected === 0} onChange={() => setSelected(0)} />
      <Template checked={selected === 1} onChange={() => setSelected(1)} />
      <Template checked={selected === 2} onChange={() => setSelected(2)} />
    </Section>
  );
};

export const WithContainerContent = () => {
  const [selected, setSelected] = useState(0);

  return (
    <>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <Template checked={selected === 0} onChange={() => setSelected(0)} />
      <Template checked={selected === 1} onChange={() => setSelected(1)} />
      <Template checked={selected === 2} onChange={() => setSelected(2)} />
      <div>
        <Nudge
          className="m-t-2"
          mediaName="globe"
          title="Text that is no longer than two lines."
          link="Link"
          href="#"
          onClick={action('action clicked')}
          onDismiss={action('dismissed')}
        />
      </div>
    </>
  );
};
