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

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

import NavigationOption from './NavigationOption';

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

const Template = (props) => {
  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={
          <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
            <Avatar type="icon">
              <Profile size="24" />
            </Avatar>
          </Badge>
        }
      />
    </div>
    <div className="m-b-2">
      <div className="title-4 m-b-1">With Contact Avatar</div>
      <Template
        showMediaCircle={false}
        media={
          <Badge
            badge={
              <img
                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
                alt=""
                height="24px"
                width="24px"
              />
            }
          >
            <Avatar type="initials" size="md">
              <span aria-hidden>SP</span>
            </Avatar>
          </Badge>
        }
      />
    </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={
          <Badge
            badge={
              <img
                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
                alt=""
                height="24px"
                width="24px"
              />
            }
          >
            <Avatar type="initials" size="md">
              <span aria-hidden>SP</span>
            </Avatar>
          </Badge>
        }
      />
    </div>
  </>
);

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

export const WithIllustration = () => {
  return (
    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} 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) => {
  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={
      <Avatar type="icon">
        <Flag code="GBP" />
      </Avatar>
    }
  />
);

export const NewContactContent = () => (
  <NavigationOptionTemplate
    title="New Contact"
    showMediaCircle={false}
    media={
      <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
        <Avatar type="icon">
          <Profile size="24" />
        </Avatar>
      </Badge>
    }
  />
);

export const ExistingContactContent = () => (
  <NavigationOptionTemplate
    title="Wise Customer"
    content="EUR account ending in 1111"
    showMediaCircle={false}
    media={
      <Badge badge={<Flag code="EUR" />}>
        <Avatar type="initials" size="md">
          <span aria-hidden>WS</span>
        </Avatar>
      </Badge>
    }
  />
);

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={
        <Avatar type="icon">
          <BankIcon size={24} />
        </Avatar>
      }
    />
    <NavigationOptionTemplate
      title="Auto Conversions"
      content="Convert money between your balances at your desired exchange rate."
      showMediaCircle={false}
      media={
        <Avatar type="icon">
          <UpwardGraphIcon size={24} />
        </Avatar>
      }
    />
  </>
);
