/* @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, LOGO } from "../../constants";
import type { LogoColors, LogoColorMap } from "../../types";

// PayPal Credit Rebrand Logo (wordmark)

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

export const getPayPalCreditRebrandSVG = ({
  primary,
}: LogoColors): ElementNode => {
  return (
    <svg
      width="171"
      height="31"
      viewBox="0 0 171 31"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 0.71875H7.92565C13.2491 0.71875 15.7608 4.57749 15.7608 8.1662C15.7608 11.7549 13.2491 15.6137 7.92565 15.6137H5.23449V23.2693H0V0.71875ZM7.14726 10.9765C9.21089 10.9765 10.377 9.84064 10.377 8.1647C10.377 6.48876 9.21089 5.35285 7.14726 5.35285H5.23298V10.975H7.14726V10.9765ZM14.9824 15.7917C14.9824 11.3356 18.2724 7.83584 22.549 7.83584C24.2536 7.83584 25.7787 8.49355 26.9161 9.60078V8.31404H31.4914V23.2678H26.9161V21.9825C25.7802 23.0898 24.2551 23.7475 22.549 23.7475C18.2724 23.7475 14.9824 20.2478 14.9824 15.7917ZM26.6174 15.7917C26.6174 13.8185 25.2417 12.3825 23.3877 12.3825C21.5338 12.3825 20.1581 13.8185 20.1581 15.7917C20.1581 17.7648 21.5338 19.2009 23.3877 19.2009C25.2417 19.2009 26.6174 17.7648 26.6174 15.7917ZM39.4774 20.5163L32.5685 8.31404H38.251L42.1097 15.4326H42.1399L45.5491 8.31404H50.8726L39.5981 30.8646H34.2746L39.4789 20.5163H39.4774ZM51.9481 0.71875H59.8738C65.1973 0.71875 67.7089 4.57749 67.7089 8.1662C67.7089 11.7549 65.1973 15.6137 59.8738 15.6137H57.1826V23.2693H51.9481V0.71875ZM59.0954 10.9765C61.159 10.9765 62.3251 9.84064 62.3251 8.1647C62.3251 6.48876 61.159 5.35285 59.0954 5.35285H57.1811V10.975H59.0954V10.9765ZM66.932 15.7917C66.932 11.3356 70.2221 7.83584 74.4987 7.83584C76.2033 7.83584 77.7284 8.49355 78.8658 9.60078V8.31404H83.441V23.2678H78.8658V21.9825C77.7299 23.0898 76.2048 23.7475 74.4987 23.7475C70.2221 23.7475 66.932 20.2478 66.932 15.7917ZM78.5656 15.7917C78.5656 13.8185 77.1898 12.3825 75.3359 12.3825C73.4819 12.3825 72.1062 13.8185 72.1062 15.7917C72.1062 17.7648 73.4819 19.2009 75.3359 19.2009C77.1898 19.2009 78.5656 17.7648 78.5656 15.7917ZM85.4141 0.71875H90.4389V23.2693H85.4141V0.71875Z"
        fill={primary}
      />
      <path
        d="M96.325 11.9929C96.325 5.53352 101.32 0.359375 107.928 0.359375C110.202 0.359375 112.295 0.98691 114.029 2.09415V5.56369C112.443 4.21811 110.41 3.41107 108.108 3.41107C103.293 3.41107 99.6436 7.11896 99.6436 11.9944C99.6436 16.8699 103.293 20.5778 108.108 20.5778C110.411 20.5778 112.445 19.7707 114.029 18.4251V21.8947C112.294 23.0019 110.2 23.6295 107.928 23.6295C101.318 23.6295 96.325 18.4553 96.325 11.9959V11.9929Z"
        fill={primary}
      />
      <path
        d="M116.034 8.91106H118.935V10.7348C119.054 10.5553 119.203 10.406 119.354 10.2566C120.282 9.32891 121.597 8.76172 123.092 8.76172C123.421 8.76172 123.719 8.79189 124.048 8.82206V11.7229C123.719 11.6927 123.421 11.6626 123.062 11.6626C121.866 11.6626 120.879 12.0819 120.191 12.7985C119.503 13.4863 119.085 14.4141 119.085 16.0885V23.2659H116.035V8.91106H116.034Z"
        fill={primary}
      />
      <path
        d="M124.228 16.1194C124.228 11.8126 127.219 8.55273 131.226 8.55273C135.232 8.55273 138.193 11.8126 138.193 16.0892C138.193 16.4482 138.163 16.8374 138.133 17.1964H127.337C127.635 19.2601 129.4 20.755 131.613 20.755C133.288 20.755 134.694 19.8876 135.412 18.5722L137.923 20.0369C136.636 22.2197 134.335 23.6256 131.583 23.6256C127.395 23.6256 124.226 20.3054 124.226 16.1194H124.228ZM135.054 14.7134C134.875 12.7403 133.349 11.3042 131.256 11.3042C129.162 11.3042 127.548 12.7403 127.338 14.7134H135.054Z"
        fill={primary}
      />
      <path
        d="M139.48 16.0896C139.48 11.902 142.621 8.55318 146.718 8.55318C148.453 8.55318 149.978 9.18072 151.144 10.2578V0H154.194V23.2671H151.293V21.831C150.097 22.9669 148.511 23.6261 146.718 23.6261C142.621 23.6261 139.48 20.2772 139.48 16.0896ZM151.473 16.0896C151.473 13.4573 149.558 11.4842 147.047 11.4842C144.535 11.4842 142.651 13.4573 142.651 16.0896C142.651 18.722 144.565 20.6951 147.047 20.6951C149.528 20.6951 151.473 18.722 151.473 16.0896Z"
        fill={primary}
      />
      <path
        d="M156.615 4.63589C156.615 3.49999 157.572 2.57227 158.709 2.57227C159.846 2.57227 160.773 3.49999 160.773 4.63589C160.773 5.77179 159.845 6.72968 158.709 6.72968C157.573 6.72968 156.615 5.74313 156.615 4.63589ZM157.184 8.91248H160.234V23.2673H157.184V8.91248Z"
        fill={primary}
      />
      <path
        d="M164.869 11.6336H162.237V8.91228H164.869V3.43945H167.919V8.91228H171V11.6336H167.919V23.2671H164.869V11.6336Z"
        fill={primary}
      />
    </svg>
  );
};

export function PayPalCreditRebrandLogoExternalImage({
  logoColor = LOGO_COLOR.DEFAULT,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const cdnUrl = getLogoCDNUrl(
    LOGO.PAYPAL_CREDIT_REBRAND,
    PAYPAL_CREDIT_REBRAND_LOGO_COLORS,
    logoColor
  );

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

export function PayPalCreditRebrandLogoInlineSVG({
  logoColor = LOGO_COLOR.DEFAULT,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const svg = getPayPalCreditRebrandSVG(
    getLogoColors(
      LOGO.PAYPAL_CREDIT_REBRAND,
      PAYPAL_CREDIT_REBRAND_LOGO_COLORS,
      logoColor
    )
  );

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

export const PayPalCreditRebrandLogo = PayPalCreditRebrandLogoInlineSVG;
