import { motion } from "framer-motion";
import { forwardRef } from "react";

export const Badge = forwardRef((props: any, ref) => {
  const { shape } = props;
  const GradientType =
    shape?.gradient?.type === "radialGradient"
      ? "radialGradient"
      : "linearGradient";

  return (
    <svg
      ref={ref as any}
      width={props?.width ?? 303}
      height={props?.height ?? 303}
      viewBox="0 0 303 303"
      fill="none"
      id={props?.id ?? undefined}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        {shape?.image?.enabled && shape?.image?.urls?.length > 0 && (
          <pattern
            id={`shape-gradient-${shape?.component ?? "null"}`}
            x="0"
            y="0"
            patternUnits="userSpaceOnUse"
            width={303}
            height={303}
          >
            <image
              href={shape?.image?.urls[0]}
              width="100%"
              height="100%"
              preserveAspectRatio="xMidYMid slice"
            />
          </pattern>
        )}
        <GradientType
          id={`shape-gradient-${shape?.component ?? "null"}`}
          gradientTransform={`rotate(${shape?.gradient?.angle ?? "90"})`}
          gradientUnits="userSpaceOnUse"
        >
          {shape?.gradient?.enabled ? (
            <>
              {shape?.gradient?.colours?.map((color: any, c: number) => (
                <stop
                  key={c}
                  offset={`${color.left}%`}
                  stopColor={color.value}
                />
              ))}
            </>
          ) : (
            <stop offset="0%" stopColor={shape?.colour ?? "#fff"} />
          )}
        </GradientType>
      </defs>
      <defs>
        <mask id={`mask-${shape?.component ?? "null"}`} fill="black">
          <rect width="100%" height="100%" fill="white" />
          <g
            style={{
              transformOrigin: "center",
            }}
            opacity={100}
          ></g>
          {shape?.transparency && props?.children && props.children}
        </mask>
      </defs>
      <g fill={`url(#${`shape-gradient-${shape?.component ?? "null"}`})`}>
        <g mask={`url(#${`mask-${shape?.component ?? "null"}`})`}>
          <motion.path
            d="M151.5,303 C130.081687,303 111.011625,291.088313 101.372437,272.529562 C81.4123125,278.816813 59.501625,273.7605 44.3705625,258.629437 C29.2395,243.498375 24.16425,221.587688 30.4704375,201.627563 C11.9116875,191.988375 0,172.918313 0,151.5 C0,130.081687 11.9116875,111.011625 30.4704375,101.372437 C24.16425,81.4123125 29.2395,59.5205625 44.3705625,44.3705625 C59.5205625,29.2395 81.43125,24.1831875 101.372437,30.4704375 C111.011625,11.9116875 130.081687,0 151.5,0 C172.918313,0 191.988375,11.9116875 201.627563,30.4704375 C221.606625,24.16425 243.479437,29.2395 258.629437,44.3705625 C273.7605,59.501625 278.83575,81.4123125 272.529562,101.372437 C291.088313,111.011625 303,130.081687 303,151.5 C303,172.918313 291.088313,191.988375 272.529562,201.627563 C278.83575,221.587688 273.7605,243.479437 258.629437,258.629437 C243.517313,273.7605 221.587688,278.83575 201.627563,272.529562 C191.988375,291.088313 172.918313,303 151.5,303 Z"
            animate={{
              scaleX:
                shape?.border?.width > 0
                  ? 1 - shape?.border?.width / props?.width
                  : 1,
              scaleY:
                shape?.border?.width > 0
                  ? 1 - shape?.border?.width / props?.width
                  : 1,
              rotate: shape?.position?.angle ?? 0,
            }}
            stroke={shape?.border?.colour}
            strokeLinejoin="round"
            strokeWidth={shape?.border?.width}
            onClick={props?.onClick ? props.onClick : () => {}}
          />
        </g>
      </g>
      {!shape?.transparency && props?.children && props.children}
    </svg>
  );
});
