import { action } from 'storybook/actions';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { FastFlag as FastFlagIcon } from '@transferwise/icons';

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

import ActionOption from './ActionOption';

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Button control](?path=/docs/content-listitem-listitem-button--docs)
 * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
export default {
  component: ActionOption,
  title: 'Option/ActionOption',
  args: {
    title: 'Action option',
    content: 'Normally, the button and icon are vertically centered.',
    action: 'Action',
    media: <FastFlagIcon />,
    showMediaCircle: false,
    additionalContent:
      'Additional content goes here, this content does not align with the logo and button',
  },
  tags: ['deprecated'],
} satisfies Meta<typeof ActionOption>;

type Story = StoryObj<typeof ActionOption>;

export const Basic: Story = {
  render: (args) => <ActionOption {...args} />,
};

export const Variants: Story = {
  render: (args) => (
    <>
      <ActionOption priority="primary" {...args} title="priority = primary" />
      <ActionOption priority="secondary" {...args} title="priority = secondary" />
      <ActionOption priority="secondary-send" {...args} title="priority = secondary-send" />
      <ActionOption priority="tertiary" {...args} title="priority = tertiary" />
    </>
  ),
};

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