/* @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";

export const IDEAL_LOGO_COLORS: LogoColorMap = {
  [LOGO_COLOR.DEFAULT]: {
    primary: "#FFFFFF",
    secondary: "#CC0066",
  },
  [LOGO_COLOR.WHITE]: {
    primary: "#FFFFFF",
    secondary: "#CC0066",
  },
  [LOGO_COLOR.BLACK]: {
    primary: "#FFFFFF",
    secondary: "#CC0066",
  },
};

export const getIdealSVG = ({
  primary,
  secondary,
}: LogoColors): ElementNode => {
  return (
    <svg
      width="94"
      height="36"
      viewBox="0 0 94 36"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="94" height="36" fill="#FCF49A" />
      <path
        d="M0.731689 3.16167V31.0822C0.731689 32.4187 1.82518 33.5122 3.16167 33.5122H19.8435C32.4551 33.5122 37.9226 26.4531 37.9226 17.0855C37.9226 7.7665 32.4551 0.731689 19.8435 0.731689H3.16167C1.82518 0.731689 0.731689 1.82518 0.731689 3.16167Z"
        fill={primary}
      />
      <path
        d="M19.8435 31.2888H5.33645C4.04856 31.2888 3.00366 30.2439 3.00366 28.956V5.30007C3.00366 4.01218 4.04856 2.96729 5.33645 2.96729H19.8435C33.6093 2.96729 35.6627 11.8246 35.6627 17.0976C35.6627 26.2465 30.0372 31.2888 19.8435 31.2888ZM3.78126 5.30007V28.956C3.78126 29.8186 4.4738 30.5112 5.33645 30.5112H19.8435C29.5391 30.5112 34.8851 25.7484 34.8851 17.0976C34.8851 5.48232 25.4567 3.74488 19.8435 3.74488H5.33645C4.4738 3.74488 3.78126 4.43743 3.78126 5.30007Z"
        fill="black"
      />
      <path
        d="M11.8975 7.58437V28.2149H20.8763C29.0289 28.2149 32.5645 23.6101 32.5645 17.0978C32.5645 10.8648 29.0289 6.02917 20.8763 6.02917H13.4527C12.59 6.02917 11.8975 6.73387 11.8975 7.58437Z"
        fill={secondary}
      />
      <path
        d="M15.0563 14.3154C15.3722 14.3154 15.6638 14.364 15.9432 14.4612C16.2227 14.5584 16.4535 14.7163 16.6601 14.9107C16.8545 15.1173 17.0124 15.3724 17.1339 15.664C17.2433 15.9678 17.304 16.3201 17.304 16.7332C17.304 17.0977 17.2554 17.4258 17.1704 17.7295C17.0732 18.0332 16.9395 18.3005 16.7573 18.5192C16.575 18.7379 16.3442 18.908 16.0647 19.0417C15.7853 19.1632 15.4572 19.2361 15.0806 19.2361H12.9543V14.3032H15.0563V14.3154ZM14.9834 18.337C15.1413 18.337 15.2871 18.3127 15.4451 18.2641C15.5909 18.2155 15.7245 18.1304 15.8339 18.0089C15.9432 17.8874 16.0404 17.7416 16.1133 17.5473C16.1862 17.3529 16.2227 17.1342 16.2227 16.8547C16.2227 16.6117 16.1984 16.3809 16.1498 16.1865C16.1012 15.9921 16.0161 15.8098 15.9068 15.6762C15.7974 15.5425 15.6516 15.421 15.4694 15.3481C15.2871 15.2752 15.0684 15.2388 14.8011 15.2388H14.0235V18.3491H14.9834V18.337ZM21.6901 14.3154V15.2266H19.0901V16.2837H21.4836V17.122H19.0901V18.3248H21.7509V19.2361H18.0087V14.3032H21.6901V14.3154ZM27.2548 19.2482H26.1249L25.7482 18.1547H23.9014L23.5126 19.2482H22.4191L24.2781 14.3154H25.408L27.2548 19.2482ZM25.4688 17.3407L24.8491 15.5304H24.837L24.193 17.3407H25.4688ZM29.0165 14.3154V18.337H31.4222V19.2482H27.9352V14.3154H29.0165Z"
        fill={primary}
      />
      <path
        d="M9.55256 28.2149C7.64502 28.2149 6.11413 26.6718 6.11413 24.7764V22.0913C6.11413 21.1436 6.87957 20.366 7.83942 20.366C8.78711 20.366 9.56471 21.1315 9.56471 22.0913V28.2149H9.55256ZM7.83942 19.0538C6.58312 19.0538 5.56738 18.0381 5.56738 16.7818C5.56738 15.5255 6.58312 14.5098 7.83942 14.5098C9.09572 14.5098 10.1115 15.5255 10.1115 16.7818C10.1115 18.0381 9.09572 19.0538 7.83942 19.0538Z"
        fill="black"
      />
      <path
        d="M81.2405 17.2C81.2405 14.4854 83.1954 12.0099 86.5713 12.0099C89.9612 12.0099 91.9162 14.4854 91.9162 17.2C91.9162 19.9147 89.9612 22.3902 86.5713 22.3902C83.196 22.3908 81.2405 19.9147 81.2405 17.2ZM88.9489 17.2C88.9489 15.8916 88.0766 14.6823 86.5719 14.6823C85.0806 14.6823 84.1949 15.8922 84.1949 17.2C84.1949 18.5084 85.0812 19.7177 86.5719 19.7177C88.0766 19.7177 88.9489 18.5084 88.9489 17.2Z"
        fill="#1D1C1C"
      />
      <path
        d="M79.1647 19.1276C80.2902 18.4945 80.9649 17.2852 80.9649 15.9487C80.9649 13.9656 79.5158 12.2773 77.2654 12.2773H72.5396V22.1236H75.4652V19.6059H76.0139L77.6875 22.1236H81.1337L79.1647 19.1276ZM76.6751 17.3409H75.4652V14.5559H76.6892C77.477 14.5559 77.9835 15.189 77.9835 15.9487C77.9835 16.7078 77.463 17.3409 76.6751 17.3409Z"
        fill="#1D1C1C"
      />
      <path
        d="M59.1837 12.2667L57.4286 18.1351L55.7158 12.2667H53.3857L51.6587 18.1351L49.9177 12.2667H46.8291L50.3668 22.0942H52.9079L54.5504 16.7452L56.1794 22.0942H58.7347L62.2723 12.2667H59.1837Z"
        fill="#1D1C1C"
      />
      <path
        d="M66.6992 19.6938C66.6969 19.6938 66.6945 19.6938 66.6922 19.6938C65.5978 19.6938 64.8305 19.0408 64.501 18.1761H71.8993H71.9363C71.9961 17.8508 72.0271 17.5178 72.0271 17.1808C72.0271 14.4732 70.078 12.0041 66.6992 12.0006V14.6684C67.8001 14.6713 68.5598 15.3231 68.8857 16.186H61.461C61.4018 16.5114 61.3713 16.8443 61.3713 17.1814C61.3713 19.8907 63.3228 22.3621 66.6922 22.3621C66.6945 22.3621 66.6969 22.3621 66.6992 22.3621V19.6938Z"
        fill="#1D1C1C"
      />
      <path
        d="M66.6923 22.361C66.8066 22.361 66.9192 22.3575 67.0305 22.3522C67.7152 22.3176 68.3366 22.1799 68.8905 21.9577C69.4445 21.7356 69.931 21.4302 70.3449 21.0608C70.7587 20.6915 71.1005 20.2589 71.3654 19.7824C71.6064 19.3492 71.7822 18.8802 71.8924 18.3907H68.7944C68.7311 18.5215 68.6572 18.6463 68.5728 18.763C68.4573 18.9224 68.3219 19.0672 68.1683 19.1921C68.0148 19.3169 67.8424 19.4224 67.6525 19.5039C67.4626 19.5854 67.2556 19.6429 67.0317 19.6716C66.9227 19.6856 66.8101 19.6939 66.6935 19.6939C65.9965 19.6939 65.432 19.4283 65.0293 19.0127L63.0151 21.0269C63.9103 21.8452 65.153 22.361 66.6923 22.361Z"
        fill="url(#paint0_linear_1326_155)"
      />
      <path
        d="M66.6924 12C63.8347 12 61.997 13.7773 61.5046 15.9709H64.5939C64.9632 15.2153 65.6906 14.6678 66.6924 14.6678C67.4908 14.6678 68.1104 15.0089 68.5155 15.5248L70.5478 13.4924C69.6404 12.5827 68.3349 12 66.6924 12Z"
        fill="url(#paint1_linear_1326_155)"
      />
      <path
        d="M42.2927 6.29272V27.8049"
        stroke="black"
        strokeWidth="0.878049"
        strokeLinecap="round"
      />
      <defs>
        <linearGradient
          id="paint0_linear_1326_155"
          x1="70.3332"
          y1="16.5683"
          x2="65.7745"
          y2="22.2156"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.0243" stopColor="#1D1C1C" stopOpacity="0" />
          <stop offset="0.676" stopColor="#1D1C1C" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_1326_155"
          x1="62.357"
          y1="17.8336"
          x2="67.0413"
          y2="13.1492"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.0243" stopColor="#1D1C1C" stopOpacity="0" />
          <stop offset="0.676" stopColor="#1D1C1C" />
        </linearGradient>
      </defs>
    </svg>
  );
};

export function IdealLogoExternalImage({
  logoColor = LOGO_COLOR.BLACK,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const cdnUrl = getLogoCDNUrl(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor);

  return <SVGLogo {...props} name={LOGO.IDEAL} cdnUrl={cdnUrl} />;
}

export function IdealLogoInlineSVG({
  logoColor = LOGO_COLOR.BLACK,
  ...props
}: {
  logoColor?: $Values<typeof LOGO_COLOR>,
}): ComponentNode<SVGLogoProps> {
  const svg = getIdealSVG(
    getLogoColors(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor)
  );

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

export const IdealLogo = IdealLogoInlineSVG;
