import { useState } from 'react';
import { action } from 'storybook/actions';
import { fn } from 'storybook/test';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';
import { Header, Nudge, Section, Title, Typography } from '..';
import RadioOption, { RadioOptionProps } from './RadioOption';

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Radio control](?path=/docs/content-listitem-listitem-radio--docs)
 * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
export default {
  component: RadioOption,
  title: 'Option/RadioOption',
  tags: ['deprecated'],
  argTypes: {
    disabled: { control: 'boolean' },
    secondary: { control: 'text' },
  },
  args: {
    title: 'Radio option',
    content: 'Button and icon are vertically centered.',
    disabled: false,
  },
};

export const Basic = (args: RadioOptionProps) => {
  const [checked, setChecked] = useState(false);

  return (
    <RadioOption
      {...args}
      media={<FastFlagIcon />}
      checked={checked}
      onChange={() => {
        fn();
        setChecked(!checked);
      }}
    />
  );
};

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

  const handleChange = (value: number) => {
    action('changed')(value);
    setSelected(value);
  };

  return (
    <Section as="fieldset">
      <Header as="legend" title="Test title" />
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 0}
        value="value0"
        onChange={() => handleChange(0)}
      />
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 1}
        value="value1"
        onChange={() => handleChange(1)}
      />
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 2}
        value="value2"
        onChange={() => handleChange(2)}
      />
    </Section>
  );
};

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

  const handleChange = (value: number) => {
    action('changed')(value);
    setSelected(value);
  };

  return (
    <>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 0}
        value="value0"
        onChange={() => handleChange(0)}
      />
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 1}
        value="value1"
        onChange={() => handleChange(1)}
      />
      <RadioOption
        {...args}
        media={<FastFlagIcon />}
        checked={selected === 2}
        value="value2"
        onChange={() => handleChange(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>
    </>
  );
};