import { action } from 'storybook/actions';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';
import { useState } from 'react';

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

import SwitchOption, { type SwitchOptionProps } from './SwitchOption';

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Switch control](?path=/docs/content-listitem-listitem-switch--docs)
 * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
const meta = {
  component: SwitchOption,
  title: 'Option/SwitchOption',
  tags: ['deprecated'],
  argTypes: {
    title: { control: 'text' },
    content: { control: 'text' },
    disabled: { control: 'boolean' },
    showMediaAtAllSizes: { control: 'boolean' },
    isContainerAligned: { control: 'boolean' },
    checked: { control: 'boolean' },
  },
  args: {
    title: 'Switch option',
    content: 'Normally, the button and icon are vertically centered.',
    disabled: false,
    showMediaAtAllSizes: false,
    isContainerAligned: false,
    checked: false,
    id: 'id',
    complex: false,
    'aria-label': 'Switch option',
  },
};
export default meta;

function Template(args: SwitchOptionProps) {
  const [checked, setChecked] = useState(args.checked);

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

export const Playground = {
  render: (args: SwitchOptionProps) => <Template {...args} />,
};

export const Multiple = {
  render: (args: SwitchOptionProps) => (
    <>
      <Template {...args} />
      <Template {...args} />
      <Template {...args} />
    </>
  ),
};

export const WithContainerContent = {
  render: (args: SwitchOptionProps) => (
    <>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <Template {...args} />
      <Template {...args} />
      <Template {...args} />
      <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>
    </>
  ),
};