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

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

import {
  getLogoCDNUrl,
  SVGCardLogo,
  type SVGCardLogoProps,
} from "../../../lib";

export const getDiscoverSVG = (): ElementNode => {
  return (
    <svg
      width="40"
      height="24"
      viewBox="0 0 40 24"
      preserveAspectRatio="xMinYMin meet"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z"
        fill="rgb(17, 49, 82)"
      />
      <path
        d="M 5.498 13.349 C 5.16 13.654 4.722 13.787 4.028 13.787 L 3.738 13.787 L 3.738 10.141 L 4.028 10.141 C 4.722 10.141 5.143 10.265 5.498 10.587 C 5.868 10.917 6.093 11.431 6.093 11.959 C 6.093 12.489 5.869 13.019 5.498 13.349 Z M 4.243 9.206 L 2.666 9.206 L 2.666 14.721 L 4.236 14.721 C 5.069 14.721 5.671 14.524 6.199 14.084 C 6.829 13.564 7.199 12.779 7.199 11.968 C 7.199 10.34 5.985 9.206 4.243 9.206 Z M 7.696 14.721 L 8.77 14.721 L 8.77 9.207 L 7.696 9.207 M 11.393 11.323 C 10.748 11.083 10.559 10.926 10.559 10.628 C 10.559 10.281 10.897 10.018 11.359 10.018 C 11.681 10.018 11.946 10.15 12.226 10.464 L 12.788 9.727 C 12.326 9.322 11.773 9.115 11.17 9.115 C 10.195 9.115 9.452 9.793 9.452 10.695 C 9.452 11.455 9.798 11.845 10.807 12.208 C 11.227 12.356 11.442 12.455 11.55 12.522 C 11.765 12.662 11.872 12.862 11.872 13.092 C 11.872 13.54 11.518 13.872 11.038 13.872 C 10.528 13.872 10.114 13.614 9.868 13.136 L 9.173 13.806 C 9.668 14.532 10.263 14.856 11.08 14.856 C 12.196 14.856 12.98 14.111 12.98 13.044 C 12.98 12.168 12.617 11.771 11.395 11.324 Z M 13.316 11.968 C 13.316 13.588 14.586 14.845 16.223 14.845 C 16.685 14.845 17.081 14.755 17.57 14.525 L 17.57 13.258 C 17.14 13.688 16.76 13.862 16.273 13.862 C 15.191 13.862 14.423 13.077 14.423 11.962 C 14.423 10.902 15.215 10.067 16.223 10.067 C 16.735 10.067 17.123 10.25 17.57 10.687 L 17.57 9.421 C 17.098 9.181 16.71 9.081 16.248 9.081 C 14.621 9.081 13.316 10.364 13.316 11.968 Z M 26.088 12.911 L 24.62 9.206 L 23.446 9.206 L 25.783 14.862 L 26.361 14.862 L 28.741 9.207 L 27.576 9.207 M 29.226 14.721 L 32.272 14.721 L 32.272 13.787 L 30.299 13.787 L 30.299 12.299 L 32.199 12.299 L 32.199 11.365 L 30.299 11.365 L 30.299 10.141 L 32.272 10.141 L 32.272 9.206 L 29.226 9.206 M 34.373 11.745 L 34.059 11.745 L 34.059 10.075 L 34.389 10.075 C 35.059 10.075 35.423 10.355 35.423 10.893 C 35.423 11.447 35.059 11.745 34.373 11.745 Z M 36.528 10.835 C 36.528 9.802 35.818 9.207 34.578 9.207 L 32.986 9.207 L 32.986 14.721 L 34.059 14.721 L 34.059 12.506 L 34.199 12.506 L 35.686 14.721 L 37.006 14.721 L 35.273 12.398 C 36.083 12.233 36.528 11.678 36.528 10.835 Z"
        fill="rgb(255, 255, 255)"
      />
      <g
        id="MarkingBase_1_"
        transform="matrix(0.089776, 0, 0, 0.089776, 2.192296, 5.72498)"
      >
        <linearGradient
          id="SVGID_1_"
          gradientUnits="userSpaceOnUse"
          x1="224.3917"
          y1="44.1731"
          x2="201.33"
          y2="80.2807"
          gradientTransform="matrix(1 0 0 -1 0 141.7323)"
        >
          <stop offset="0" stop-color="#F89F21" />
          <stop offset="0.2502" stop-color="#F79A23" />
          <stop offset="0.5331" stop-color="#F78E22" />
          <stop offset="0.6196" stop-color="#F68721" />
          <stop offset="0.7232" stop-color="#F48220" />
          <stop offset="1" stop-color="#F27623" />
        </linearGradient>
        <circle fill="url(#SVGID_1_)" cx="207.343" cy="70.866" r="33.307" />
        <linearGradient
          id="SVGID_2_"
          gradientUnits="userSpaceOnUse"
          x1="220.7487"
          y1="44.664"
          x2="187.0436"
          y2="110.5426"
          gradientTransform="matrix(1 0 0 -1 0 141.7323)"
        >
          <stop offset="0" stop-color="#F68721" stop-opacity="0" />
          <stop offset="0.3587" stop-color="#E27027" stop-opacity="0.2704" />
          <stop offset="0.703" stop-color="#D4612C" stop-opacity="0.5299" />
          <stop offset="0.9816" stop-color="#D15D2D" stop-opacity="0.74" />
        </linearGradient>
        <circle
          opacity="0.65"
          fill="url(#SVGID_2_)"
          cx="207.343"
          cy="70.866"
          r="33.307"
        />
      </g>
      <g
        id="Orange_1_"
        enable-background="new    "
        transform="matrix(0.469224, 0, 0, 0.469224, 13.785085, 6.199149)"
      >
        <g id="Orange">
          <g>
            <path
              d="M13,38c20.1,0,40,0,40,0c1.7,0,3-1.3,3-3V18C56,18,51.2,31.8,13,38z"
              fill="rgb(255, 129, 38)"
            />
          </g>
        </g>
      </g>
    </svg>
  );
};

export function DiscoverLogoExternalImage({
  ...props
}: {} = {}): ComponentNode<SVGCardLogoProps> {
  const cdnUrl = getLogoCDNUrl(CARD.DISCOVER);

  return <SVGCardLogo {...props} name={CARD.DISCOVER} cdnUrl={cdnUrl} />;
}

export function DiscoverLogoInlineSVG({
  ...props
}: {} = {}): ComponentNode<SVGCardLogoProps> {
  const svg = getDiscoverSVG();

  return (
    <SVGCardLogo
      {...props}
      name={CARD.DISCOVER}
      render={() => {
        return svg;
      }}
    />
  );
}

export const DiscoverLogo = DiscoverLogoInlineSVG;
