// ShapeBackgroundWrapper.tsx
import React from "react";
import { ShapeBackgroundWrapperProps, ThemeKey } from "./types";

export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
  children,
  background,
  className,
  fill = "yellow",
  maxFit,
  show = true,
  path = "path2",
}) => {
  const variantClass = `${path}`;

  const textColorClasses: Record<ThemeKey, string> = {
    blue: "text-[#07B2E2]",
    green: "text-[#26B170]",
    yellow: "text-[#F5FF1E]",
    purple: "text-[#931D69]",
    white: "text-white",
    navy: "text-[#00002D]",
  };

  const bgColorClasses: Record<ThemeKey, string> = {
    blue: "bg-[#07B2E2]",
    green: "bg-[#26B170]",
    yellow: "bg-[#F5FF1E]",
    purple: "bg-[#931D69]",
    white: "bg-white",
    navy: "bg-[#00002D]",
  };

  const isThemeKey =
    typeof background === "string" && background in bgColorClasses;

  const bgClass = isThemeKey
    ? bgColorClasses[background as ThemeKey]
    : undefined;
  const bgStyle = background && !isThemeKey ? { background } : undefined;

  const fillClass =
    fill in textColorClasses
      ? textColorClasses[fill as ThemeKey]
      : "text-[#F5FF1E]";

  if (!show) {
    return (
      <div
        className={`shared-component-backgound-wrapper ${className ?? ""} ${bgClass ?? ""}`}
        style={bgStyle}
      >
        {children}
      </div>
    );
  }

  return (
    <div
      className={`shared-component-backgound-wrapper shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
        bgClass ?? (!bgStyle ? "bg-white" : "")
      }`}
      style={bgStyle}
    >
      {path === "path1" && (
        <svg
          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2371px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
          width="2262"
          height="4359"
          viewBox="0 0 2262 4359"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M1838.72 444.021C2216.45 758.242 2351.22 1060.81 2202.83 1982.25C2062.95 2851.55 1923.57 4265.14 1394.48 4348.94C1079.75 4409.66 766.955 4172.68 508.523 4003.04C340.876 3884.89 192.855 3774.9 26.6866 3661.93C-27.6562 3624.7 8.69435 3542.15 74.1261 3555.69C415.628 3626.61 686.916 3615.36 942.942 3443.48C1410.95 3163.54 1632.32 2141.02 1629.56 1543.75C1637.51 910.76 1276.06 582.318 829.643 352.709C587.562 235.528 333.508 169.963 100.699 149.757C31.9431 143.965 25.0259 47.9703 92.459 33.1281C623.196 -84.6769 1404.59 131.886 1839.84 443.573" />
        </svg>
      )}
      {path === "path2" && (
        <svg
          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[45.8px] z-0 translate-x-[-101%] ${variantClass} fill-current ${fillClass}`}
          width="3739"
          height="3666"
          viewBox="0 0 3739 3666"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.09 4009.1 647.09 3634.26 264.38C3417.79 27.9944 3025.37 31.7818 2716.76 13.9013C2511.72 8.81634 2327.31 8.87399 2126.55 0.511773C2060.73 -2.00127 2040.7 85.9475 2101.3 114.087C2417.76 260.743 2628.86 431.51 2731.94 722.142C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.97 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
        </svg>
      )}
      {path === "path3" && (
        <svg
          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2600px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
          width="3044"
          height="3248"
          viewBox="0 0 3044 3248"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M1.21857 1353.6C-0.931975 1765.46 120.504 2015.15 791.765 2417.01C1424.98 2796.19 2407.16 3469.31 2746.34 3175.04C2955.08 3005.86 2971.76 2677.32 3002.33 2420C3016.95 2248.7 3026.23 2094.39 3043.38 1926.83C3048.81 1871.88 2976.24 1850.67 2949.63 1899.96C2810.91 2157.33 2657.35 2325.33 2408.95 2396.88C1976.88 2546.15 1201.39 2136.59 819.655 1812.63C409.231 1476.27 393.475 1067.19 486.97 656.895C542.372 438.358 637.352 239.983 749.974 79.7081C783.347 32.4684 725.487 -23.7534 679.587 11.5067C317.699 288.49 35.1358 906.671 0.328344 1354.07" />
        </svg>
      )}
      {path === "path4" && (
        <svg
          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-1966.1px] z-0 translate-x-[-48%] ${variantClass} fill-current ${fillClass}`}
          width="3739"
          height="3666"
          viewBox="0 0 3739 3666"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
        </svg>
      )}

      <div className="shape-bg-content relative z-[1]">{children}</div>
    </div>
  );
};

export default ShapeBackgroundWrapper;