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

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

import { getLogoCDNUrl, SVGLogo, type SVGLogoProps } from "../../lib";
import { MARK } from "../../constants";

export const getBancontactMarkRebrandSVG = (): ElementNode => {
  return (
    <svg
      width="39"
      height="24"
      viewBox="0 0 39 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 23.9037V18.3211H1.72538C2.97948 18.3211 3.78626 18.7916 3.78626 19.7646C3.78626 20.3149 3.53065 20.6977 3.17119 20.921C3.69039 21.1602 3.99393 21.6228 3.99393 22.2529C3.99393 23.3774 3.17119 23.9037 1.89313 23.9037L0 23.9037ZM1.11031 20.6419H1.93307C2.43629 20.6419 2.65198 20.3946 2.65198 19.9401C2.65198 19.4536 2.26057 19.2941 1.73336 19.2941H1.11031V20.6419ZM1.11031 22.9307H1.79726C2.46826 22.9307 2.85965 22.7633 2.85965 22.2369C2.85965 21.7185 2.52418 21.5032 1.89313 21.5032H1.11031V22.9307ZM6.14712 23.9994C5.05277 23.9994 4.5016 23.4651 4.5016 22.7473C4.5016 21.9578 5.14863 21.4952 6.10718 21.4872C6.34537 21.4916 6.58294 21.5129 6.81809 21.5511V21.3596C6.81809 20.8732 6.53852 20.6419 6.00333 20.6419C5.6428 20.6374 5.28479 20.7024 4.94892 20.8333L4.74923 19.972C5.09271 19.8284 5.64388 19.7327 6.13114 19.7327C7.30535 19.7327 7.88846 20.3548 7.88846 21.4314V23.6485C7.56097 23.816 6.9459 23.9994 6.14712 23.9994ZM6.81809 23.0982V22.2449C6.63186 22.2035 6.44174 22.1821 6.25096 22.1811C5.88351 22.1811 5.59595 22.3246 5.59595 22.6995C5.59595 23.0344 5.83559 23.2099 6.25894 23.2099C6.45145 23.2162 6.64281 23.1779 6.81809 23.0982ZM8.66455 23.9037V20.0836C9.23857 19.8534 9.85121 19.7343 10.4698 19.7327C11.636 19.7327 12.307 20.3069 12.307 21.3676V23.9037H11.2047V21.4474C11.2047 20.8971 10.9491 20.6419 10.4618 20.6419C10.2199 20.6385 9.98005 20.6875 9.75887 20.7854V23.9037L8.66455 23.9037ZM16.1593 19.972L15.9516 20.8413C15.6662 20.7178 15.3598 20.6501 15.0489 20.6419C14.4019 20.6419 14.0505 21.0965 14.0505 21.8461C14.0505 22.6676 14.4179 23.0903 15.1049 23.0903C15.4114 23.0819 15.7131 23.0113 15.9915 22.8829L16.1672 23.7682C15.8055 23.9289 15.4128 24.0078 15.017 23.9994C13.691 23.9994 12.9242 23.178 12.9242 21.878C12.9242 20.586 13.683 19.7327 14.9531 19.7327C15.3672 19.7307 15.7774 19.8121 16.1593 19.972H16.1593ZM18.5406 23.9994C17.3105 23.9994 16.5437 23.1461 16.5437 21.8621C16.5437 20.586 17.3105 19.7327 18.5406 19.7327C19.7788 19.7327 20.5296 20.586 20.5296 21.8621C20.5296 23.1461 19.7788 23.9994 18.5406 23.9994H18.5406ZM18.5406 23.0903C19.1078 23.0903 19.4033 22.6197 19.4033 21.8621C19.4033 21.1124 19.1078 20.6419 18.5406 20.6419C17.9815 20.6419 17.67 21.1124 17.67 21.8621C17.67 22.6197 17.9815 23.0903 18.5406 23.0903H18.5406ZM21.1675 23.9037V20.0836C21.7415 19.8534 22.3542 19.7343 22.9728 19.7327C24.139 19.7327 24.81 20.3069 24.81 21.3676V23.9037H23.7076V21.4474C23.7076 20.8971 23.452 20.6419 22.9648 20.6419C22.7228 20.6385 22.483 20.6875 22.2618 20.7854V23.9037L21.1675 23.9037ZM27.296 23.9994C26.3454 23.9994 25.8582 23.481 25.8582 22.4283V20.7057H25.315V19.8284H25.8582V18.9431L26.9605 18.8873V19.8284H27.8471V20.7057H26.9605V22.4124C26.9605 22.8749 27.1522 23.0903 27.5117 23.0903C27.6541 23.0899 27.7961 23.0739 27.935 23.0424L27.9909 23.9277C27.7628 23.9781 27.5296 24.0022 27.296 23.9994H27.296ZM30.0783 23.9994C28.984 23.9994 28.4328 23.4651 28.4328 22.7473C28.4328 21.9578 29.0799 21.4952 30.0384 21.4872C30.2766 21.4916 30.5142 21.5129 30.7493 21.5511V21.3596C30.7493 20.8732 30.4697 20.6419 29.9346 20.6419C29.574 20.6374 29.216 20.7024 28.8801 20.8333L28.6805 19.972C29.0239 19.8284 29.5751 19.7327 30.0624 19.7327C31.2366 19.7327 31.8197 20.3548 31.8197 21.4314V23.6485C31.4922 23.816 30.8771 23.9994 30.0783 23.9994H30.0783ZM30.7493 23.0982V22.2449C30.5631 22.2035 30.3729 22.1821 30.1822 22.1811C29.8147 22.1811 29.5272 22.3246 29.5272 22.6995C29.5272 23.0344 29.7668 23.2099 30.1902 23.2099C30.3827 23.2162 30.574 23.1779 30.7493 23.0982H30.7493ZM35.5911 19.972L35.3834 20.8413C35.0981 20.7178 34.7917 20.6501 34.4808 20.6419C33.8338 20.6419 33.4823 21.0965 33.4823 21.8461C33.4823 22.6676 33.8498 23.0903 34.5367 23.0903C34.8433 23.0819 35.145 23.0113 35.4234 22.8829L35.5991 23.7682C35.2374 23.9288 34.8447 24.0078 34.4489 23.9994C33.1229 23.9994 32.356 23.178 32.356 21.878C32.356 20.586 33.1149 19.7327 34.385 19.7327C34.799 19.7307 35.2093 19.8121 35.5911 19.972H35.5911ZM38.0147 23.9994C37.0642 23.9994 36.5769 23.481 36.5769 22.4283V20.7057H36.0337V19.8284H36.5769V18.9431L37.6792 18.8873V19.8284H38.5659V20.7057H37.6792V22.4124C37.6792 22.8749 37.8709 23.0903 38.2304 23.0903C38.3728 23.0899 38.5148 23.0739 38.6537 23.0424L38.7097 23.9277C38.4815 23.9781 38.2483 24.0022 38.0147 23.9994H38.0147Z"
        fill="#1E3764"
      />
      <path
        d="M7.68895 15.5299C13.5219 15.5299 16.4384 11.6474 19.3548 7.76495H0V15.5299H7.68895Z"
        fill="url(#paint0_linear_4717_37207)"
      />
      <path
        d="M31.0213 0C25.1884 0 22.2719 3.88246 19.3555 7.76491H38.7103V0H31.0213Z"
        fill="url(#paint1_linear_4717_37207)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_4717_37207"
          x1="3.91487"
          y1="12.0059"
          x2="18.0683"
          y2="6.74053"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#005AB9" />
          <stop offset="1" stop-color="#1E3764" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_4717_37207"
          x1="20.5274"
          y1="8.43839"
          x2="35.5562"
          y2="3.30275"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#FBA900" />
          <stop offset="1" stop-color="#FFD800" />
        </linearGradient>
      </defs>
    </svg>
  );
};

export function BancontactMarkRebrandExternalImage({
  ...props
}: {}): ComponentNode<SVGLogoProps> {
  const cdnUrl = getLogoCDNUrl(MARK.BANCONTACT_REBRAND);

  return <SVGLogo {...props} name={MARK.BANCONTACT_REBRAND} cdnUrl={cdnUrl} />;
}

export function BancontactMarkRebrandInlineSVG({
  ...props
}: {}): ComponentNode<SVGLogoProps> {
  const svg = getBancontactMarkRebrandSVG();

  return (
    <SVGLogo
      {...props}
      name={MARK.BANCONTACT_REBRAND}
      render={() => {
        return svg;
      }}
    />
  );
}

export const BancontactMarkRebrand = BancontactMarkRebrandInlineSVG;
