import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { action } from 'storybook/actions';
import { Illustration, Assets, Flag } from '@wise/art';
import {
  FastFlag as FastFlagIcon,
  Bank as BankIcon,
  Profile,
  UpwardGraph as UpwardGraphIcon,
  FastFlag,
} from '@transferwise/icons';
import type { AvatarViewBadgeProps } from '../avatarView/AvatarView';
import { Nudge, Header, Title, Typography, AvatarView, type NavigationOptionProps } from '..';
import NavigationOption from './NavigationOption';
import { fn } from 'storybook/test';

type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };

/**
 * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs)
 * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 */
const meta: Meta<StoryArgs> = {
  component: NavigationOption,
  title: 'Option/NavigationOption',
  tags: ['deprecated'],
  argTypes: {
    href: { control: 'text' },
    title: { control: 'text' },
    content: { control: 'text' },
    complex: { control: 'boolean' },
    disabled: { control: 'boolean' },
    showMediaAtAllSizes: { control: 'boolean' },
    showMediaCircle: { control: 'boolean' },
    isContainerAligned: { control: 'boolean' },
    className: { control: 'text' },
    hasTitleOnly: { control: 'boolean' },
    media: { control: false },
  },
};
export default meta;

const defaultArgs = {
  title: 'Navigation option',
  content: 'Button and icon are vertically centered.',
  complex: false,
  disabled: false,
  showMediaAtAllSizes: false,
  showMediaCircle: true,
  isContainerAligned: false,
  hasTitleOnly: false,
};

const badgeProps: AvatarViewBadgeProps = {
  icon: <FastFlag />,
  type: 'action',
};

export const Basic: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      id="navigation-option"
      name="navigation-option"
      content={hasTitleOnly ? null : args.content}
      media={args.media || <FastFlagIcon />}
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const Variants: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <div>
      <div className="m-b-2">
        <div className="title-4 m-b-1">Has Title Only</div>
        <NavigationOption
          {...args}
          content={null}
          media={args.media || <FastFlagIcon />}
          onClick={fn()}
        />
      </div>
      <div className="m-b-2">
        <div className="title-4 m-b-1">Full Content</div>
        <NavigationOption
          {...args}
          content={hasTitleOnly ? null : args.content}
          media={args.media || <FastFlagIcon />}
          onClick={fn()}
        />
      </div>
      <div className="m-b-2">
        <div className="title-4 m-b-1">With Icon</div>
        <NavigationOption
          {...args}
          media={<BankIcon size={24} />}
          content={hasTitleOnly ? null : args.content}
          onClick={fn()}
        />
      </div>
      <div className="m-b-2">
        <div className="title-4 m-b-1">With Icon Avatar</div>
        <NavigationOption
          {...args}
          showMediaCircle={false}
          media={
            <AvatarView badge={{ type: 'reference' }}>
              <Profile />
            </AvatarView>
          }
          content={hasTitleOnly ? null : args.content}
          onClick={fn()}
        />
      </div>
      <div className="m-b-2">
        <div className="title-4 m-b-1">With Contact Avatar</div>
        <NavigationOption
          {...args}
          showMediaCircle={false}
          media={<AvatarView badge={badgeProps} profileName="Spencer Penn" />}
          content={hasTitleOnly ? null : args.content}
          onClick={fn()}
        />
      </div>
      <div className="m-t-4 m-b-2">
        <div className="title-4 m-b-1">Not recommended usage</div>
        <p>
          Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
          circle background-colour to overlap which also causes clipping issues with the Badge
          component.
        </p>
        <NavigationOption
          {...args}
          showMediaCircle
          media={<AvatarView badge={badgeProps} profileName="Spencer Penn" />}
          content={hasTitleOnly ? null : args.content}
          onClick={fn()}
        />
      </div>
    </div>
  ),
  args: { ...defaultArgs },
};

export const Multiple: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <div>
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
    </div>
  ),
  args: { ...defaultArgs },
};

export const WithIllustration: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
      showMediaCircle={false}
      content={hasTitleOnly ? null : args.content}
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const WithContainerContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <div>
      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
        Choose how to pay
      </Title>
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
      <NavigationOption
        {...args}
        content={hasTitleOnly ? null : args.content}
        media={args.media || <FastFlagIcon />}
        onClick={fn()}
      />
      <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>
    </div>
  ),
  args: { ...defaultArgs },
};

export const BalanceContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      title="100 GBP available"
      content="British pound"
      showMediaCircle={false}
      media={
        <AvatarView>
          <Flag code="GBP" />
        </AvatarView>
      }
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const NewContactContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      title="New Contact"
      showMediaCircle={false}
      media={
        <AvatarView badge={{ type: 'reference' }}>
          <Profile size="24" />
        </AvatarView>
      }
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const ExistingContactContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      title="Wise Customer"
      content="EUR account ending in 1111"
      showMediaCircle={false}
      media={<AvatarView profileName="Walter Smith" badge={{ flagCode: 'EUR' }} />}
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const CardContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <NavigationOption
      {...args}
      title="Digital card •••• 2123"
      content="Expires 12/27"
      showMediaCircle={false}
      media={<UpwardGraphIcon size={24} />}
      onClick={fn()}
    />
  ),
  args: { ...defaultArgs },
};

export const ManageAccountContent: StoryObj<StoryArgs> = {
  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
    <div>
      <Header title="Balances" />
      <NavigationOption
        {...args}
        title="Account details"
        content="View and share your account details to get paid."
        showMediaCircle={false}
        media={
          <AvatarView>
            <BankIcon />
          </AvatarView>
        }
        onClick={fn()}
      />
      <NavigationOption
        {...args}
        title="Auto Conversions"
        content="Convert money between your balances at your desired exchange rate."
        showMediaCircle={false}
        media={
          <AvatarView>
            <UpwardGraphIcon size={24} />
          </AvatarView>
        }
        onClick={fn()}
      />
    </div>
  ),
};