/* @flow */
/** @jsx node */

import {
  node,
  type ElementNode,
  type ComponentNode,
} from "@krakenjs/jsx-pragmatic/src";

import {
  getLogoCDNUrl,
  getLogoColors,
  SVGLogo,
  type SVGLogoProps,
} from "../../lib";
import { LOGO_COLOR, BADGE } from "../../constants";
import type { LogoColors, LogoColorMap } from "../../types";

// PayPal Rebrand Badge

export const PAYPAL_REBRAND_BADGE_COLORS: LogoColorMap = {
  [LOGO_COLOR.DEFAULT]: {
    background: "#60CDFF",
    foreground: "#000000",
  },
  [LOGO_COLOR.BLACK]: {
    background: "#000000",
    foreground: "#FFFFFF",
  },
  [LOGO_COLOR.BLUE]: {
    background: "#60CDFF",
    foreground: "#000000",
  },
  [LOGO_COLOR.WHITE]: {
    background: "#FFFFFF",
    foreground: "#000000",
  },
};

export const getPayPalRebrandBadgeSVG = ({
  background,
  foreground,
}: LogoColors): ElementNode => {
  return (
    <svg
      width="178"
      height="70"
      viewBox="0 0 178 70"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="177.059" height="70" rx="16.4706" fill={background} />
      <path
        d="M147.474 18.6094V48.7549H140.648V18.6094H147.474Z"
        fill={foreground}
      />
      <path
        d="M138.129 28.7755V48.7976H132.059V47.0744C131.293 47.8236 130.416 48.3949 129.442 48.7976C128.463 49.2237 127.405 49.4391 126.268 49.4391C124.838 49.4391 123.516 49.1722 122.3 48.6384C121.084 48.0765 120.026 47.3179 119.126 46.358C118.225 45.3981 117.511 44.2743 116.982 42.996C116.481 41.6896 116.23 40.2849 116.23 38.7912C116.23 37.2975 116.481 35.9068 116.982 34.6285C117.511 33.3221 118.225 32.1843 119.126 31.2244C120.026 30.2645 121.084 29.5153 122.3 28.9815C123.516 28.4196 124.838 28.1387 126.268 28.1387C127.405 28.1387 128.463 28.3541 129.442 28.7802C130.421 29.1829 131.293 29.7541 132.059 30.5033V28.7802H138.129V28.7755ZM127.372 43.3519C128.616 43.3519 129.632 42.9258 130.426 42.0689C131.247 41.2167 131.655 40.121 131.655 38.7865C131.655 37.452 131.247 36.3563 130.426 35.5041C129.632 34.6519 128.611 34.2212 127.372 34.2212C126.133 34.2212 125.098 34.6473 124.277 35.5041C123.483 36.3563 123.084 37.452 123.084 38.7865C123.084 40.121 123.483 41.2167 124.277 42.0689C125.098 42.9211 126.128 43.3519 127.372 43.3519Z"
        fill={foreground}
      />
      <path
        d="M106.497 18.6094C108.297 18.6094 109.829 18.8622 111.1 19.3679C112.372 19.8736 113.444 20.5807 114.316 21.4891C115.216 22.4256 115.917 23.4932 116.418 24.6919C116.92 25.8952 117.17 27.1876 117.17 28.5783C117.17 29.969 116.92 31.2613 116.418 32.4647C115.917 33.6681 115.216 34.7357 114.316 35.6675C113.444 36.5759 112.372 37.2829 111.1 37.7886C109.829 38.2943 108.297 38.5472 106.497 38.5472H103.202V48.797H96.2549V18.6094H106.492H106.497ZM105.504 32.343C106.432 32.343 107.142 32.2493 107.648 32.062C108.177 31.8466 108.613 31.5797 108.956 31.2613C109.671 30.5917 110.028 29.6974 110.028 28.5783C110.028 27.4592 109.671 26.5648 108.956 25.8952C108.613 25.5768 108.177 25.3193 107.648 25.1367C107.146 24.9213 106.432 24.8183 105.504 24.8183H103.202V32.3476H105.504V32.343Z"
        fill={foreground}
      />
      <path
        d="M70.6724 28.7773H78.2134L83.332 38.3857H83.4109L87.9726 28.7773H94.9567L79.9954 58.9697H73.0484L79.8747 45.1565L70.6677 28.7773H70.6724Z"
        fill={foreground}
      />
      <path
        d="M69.3178 28.7755V48.7976H63.2478V47.0744C62.4821 47.8236 61.6051 48.3949 60.6305 48.7976C59.6514 49.2237 58.5933 49.4391 57.4564 49.4391C56.027 49.4391 54.7045 49.1722 53.4886 48.6384C52.2728 48.0765 51.2147 47.3179 50.3144 46.358C49.4142 45.3981 48.6995 44.2743 48.1705 42.996C47.6693 41.6896 47.4187 40.2849 47.4187 38.7912C47.4187 37.2975 47.6693 35.9068 48.1705 34.6285C48.6995 33.3221 49.4142 32.1843 50.3144 31.2244C51.2147 30.2645 52.2728 29.5153 53.4886 28.9815C54.7045 28.4196 56.027 28.1387 57.4564 28.1387C58.5933 28.1387 59.6514 28.3541 60.6305 28.7802C61.6097 29.1829 62.4821 29.7541 63.2478 30.5033V28.7802H69.3178V28.7755ZM58.5608 43.3519C59.8045 43.3519 60.8208 42.9258 61.619 42.0689C62.4404 41.2167 62.8487 40.121 62.8487 38.7865C62.8487 37.452 62.4404 36.3563 61.619 35.5041C60.8254 34.6519 59.8045 34.2212 58.5608 34.2212C57.3171 34.2212 56.2869 34.6473 55.4655 35.5041C54.672 36.3563 54.2729 37.452 54.2729 38.7865C54.2729 40.121 54.672 41.2167 55.4655 42.0689C56.2869 42.9211 57.3171 43.3519 58.5608 43.3519Z"
        fill={foreground}
      />
      <path
        d="M37.9701 18.6094C39.7707 18.6094 41.3021 18.8622 42.5736 19.3679C43.8451 19.8736 44.9171 20.5807 45.7895 21.4891C46.6898 22.4256 47.3906 23.4932 47.8917 24.6919C48.3929 25.8952 48.6435 27.1876 48.6435 28.5783C48.6435 29.969 48.3929 31.2613 47.8917 32.4647C47.3906 33.6681 46.6898 34.7357 45.7895 35.6675C44.9171 36.5759 43.8451 37.2829 42.5736 37.7886C41.3021 38.2943 39.7707 38.5472 37.9701 38.5472H34.6753V48.797H27.7329V18.6094H37.9701ZM36.9817 32.343C37.9098 32.343 38.6198 32.2493 39.1256 32.062C39.6547 31.8466 40.0909 31.5797 40.4343 31.2613C41.1489 30.5917 41.5063 29.6974 41.5063 28.5783C41.5063 27.4592 41.1489 26.5648 40.4343 25.8952C40.0909 25.5768 39.6547 25.3193 39.1256 25.1367C38.6244 24.9213 37.9098 24.8183 36.9817 24.8183H34.6799V32.3476H36.9817V32.343Z"
        fill={foreground}
      />
    </svg>
  );
};

export function PayPalRebrandBadgeExternalImage({
  logoColor = LOGO_COLOR.DEFAULT,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const cdnUrl = getLogoCDNUrl(
    BADGE.PAYPAL_REBRAND,
    PAYPAL_REBRAND_BADGE_COLORS,
    logoColor
  );

  return (
    <SVGLogo
      {...props}
      name={BADGE.PAYPAL_REBRAND}
      alt="PayPal"
      role="presentation"
      logoColor={logoColor}
      cdnUrl={cdnUrl}
    />
  );
}

export function PayPalRebrandBadgeInlineSVG({
  logoColor = LOGO_COLOR.DEFAULT,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const svg = getPayPalRebrandBadgeSVG(
    getLogoColors(BADGE.PAYPAL_REBRAND, PAYPAL_REBRAND_BADGE_COLORS, logoColor)
  );

  return (
    <SVGLogo
      {...props}
      name={BADGE.PAYPAL_REBRAND}
      alt="PayPal"
      role="presentation"
      logoColor={logoColor}
      render={() => {
        return svg;
      }}
    />
  );
}

export const PayPalRebrandBadge = PayPalRebrandBadgeInlineSVG;
