import { ReactNode } from 'react';
import { action } from '@storybook/addon-actions';
import { text, boolean } from '@storybook/addon-knobs';
import {
  FastFlag as FastFlagIcon,
  Bank as BankIcon,
  UpwardGraph as UpwardGraphIcon,
  Plus as PlusIcon,
  FastFlag,
} from '@transferwise/icons';
import { Illustration, Assets, Flag } from '@wise/art';

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

import NavigationOption from './NavigationOption';

export default {
  component: NavigationOption,
  title: 'Option/NavigationOption',
  tags: ['autodocs'],
};

type TemplateTypes = {
  href?: string;
  title?: string;
  content?: string;
  complex?: boolean;
  disabled?: boolean;
  showMediaAtAllSizes?: boolean;
  showMediaCircle?: boolean;
  isContainerAligned?: boolean;
  className?: string;
  hasTitleOnly?: boolean;
  media?: ReactNode;
};

const Template = (props: TemplateTypes) => {
  const href = text('href', props.href ?? '');
  const title = text('title', props.title ?? 'Navigation option');
  const content = text('content', props.content ?? 'Button and icon are vertically centered.');
  const complex = boolean('complex', props.complex ?? false);
  const disabled = boolean('disabled', props.disabled ?? false);
  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
  const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
  const isContainerAligned = boolean('isContainerAligned', false);
  const className = text('className', props.className ?? '');

  return (
    <NavigationOption
      complex={complex}
      disabled={disabled}
      id="navigation-option"
      name="navigation-option"
      href={href}
      title={title}
      content={props.hasTitleOnly ? null : content}
      media={props.media || <FastFlagIcon />}
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      showMediaCircle={showMediaCircle}
      className={className}
      onClick={action('clicked')}
    />
  );
};

export const Basic = () => <Template />;

export const Variants = () => (
  <>
    <div className="m-b-2">
      <div className="title-4 m-b-1">Has Title Only</div>
      <Template hasTitleOnly />
    </div>
    <div className="m-b-2">
      <div className="title-4 m-b-1">Full Content</div>
      <Template />
    </div>
    <div className="m-b-2">
      <div className="title-4 m-b-1">With Icon</div>
      <Template media={<BankIcon size={24} />} />
    </div>
    <div className="m-b-2">
      <div className="title-4 m-b-1">With Icon Avatar</div>
      <Template showMediaCircle={false} media={<AvatarView badge={{ icon: <PlusIcon /> }} />} />
    </div>
    <div className="m-b-2">
      <div className="title-4 m-b-1">With Contact Avatar</div>
      <Template
        showMediaCircle={false}
        media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
      />
    </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>
      <Template
        showMediaCircle
        media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
      />
    </div>
  </>
);

export const Multiple = () => (
  <>
    <Template />
    <Template />
    <Template />
  </>
);

export const WithIllustration = () => {
  return (
    <Template
      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
      showMediaCircle={false}
    />
  );
};

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

const NavigationOptionTemplate = (props: TemplateTypes) => {
  const {
    href,
    title,
    content,
    complex,
    disabled,
    showMediaAtAllSizes,
    showMediaCircle,
    isContainerAligned,
    className,
  } = props;

  return (
    <NavigationOption
      complex={complex}
      disabled={disabled}
      id="navigation-option"
      name="navigation-option"
      href={href}
      title={title}
      content={props.hasTitleOnly ? null : content}
      media={props.media || <FastFlagIcon />}
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      showMediaCircle={showMediaCircle}
      className={className}
      onClick={action('clicked')}
    />
  );
};

export const BalanceContent = () => (
  <NavigationOptionTemplate
    title="100 GBP available"
    content="British pound"
    showMediaCircle={false}
    media={
      <AvatarView>
        <Flag code="GBP" />
      </AvatarView>
    }
  />
);

export const NewContactContent = () => (
  <NavigationOptionTemplate
    title="New Contact"
    showMediaCircle={false}
    media={<AvatarView badge={{ type: 'action' }} />}
  />
);

export const ExistingContactContent = () => (
  <NavigationOptionTemplate
    title="Wise Customer"
    content="EUR account ending in 1111"
    showMediaCircle={false}
    media={<AvatarView profileName="Wise Steve" badge={{ flagCode: 'EUR' }} />}
  />
);

export const CardContent = () => (
  <NavigationOptionTemplate
    title="Digital card •••• 2123"
    content="Test card"
    showMediaCircle={false}
    media={
      <img
        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
        alt=""
      />
    }
  />
);

export const ManageAccountContent = () => (
  <>
    <Header title="Balances" />
    <NavigationOptionTemplate
      title="Account details"
      content="View and share your account details to get paid."
      showMediaCircle={false}
      media={
        <AvatarView>
          <BankIcon size={24} />
        </AvatarView>
      }
    />
    <NavigationOptionTemplate
      title="Auto Conversions"
      content="Convert money between your balances at your desired exchange rate."
      showMediaCircle={false}
      media={
        <AvatarView>
          <UpwardGraphIcon size={24} />
        </AvatarView>
      }
    />
  </>
);
