import { TRANSITION_STYLE } from "../constants";
import type { OrganSvgProps } from "../types";

export function Integuments({ style, colorScale, isActive = false, className }: OrganSvgProps) {
  const defaultColor = colorScale[100];
  const activeColor = colorScale[300];
  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
  const opacity = isActive ? 1 : 0.65;

  return (
    <g className={className} data-organ="integuments" opacity={opacity}>
      <path
        d={ARM_PATH}
        fill="url(#paint0_radial_795_165610)"
        stroke={style?.stroke}
        strokeWidth={(style?.strokeWidth ?? 1) * 0.5}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={LEG_PATH}
        fill="url(#paint1_radial_795_165610)"
        stroke={style?.stroke}
        strokeWidth={(style?.strokeWidth ?? 1) * 0.5}
        style={{ transition: TRANSITION_STYLE }}
      />
      <defs>
        <radialGradient
          id="paint0_radial_795_165610"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(8 45.5) rotate(90) scale(61.5 22.8989)"
        >
          <stop offset="0.158654" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
          <stop offset="1" stopColor="white" stopOpacity="0" />
        </radialGradient>
        <radialGradient
          id="paint1_radial_795_165610"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(79.5 195.5) rotate(90) scale(79.5 33.1161)"
          style={{ transition: TRANSITION_STYLE }}
        >
          <stop offset="0.16" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
          <stop offset="1" stopColor="white" stopOpacity="0" />
        </radialGradient>
      </defs>
    </g>
  );
}

const ARM_PATH =
  "M10.7774 0.000245649C10.4246 -0.0197181 9.99327 1.17811 9.42474 3.24435C9.01305 4.75162 8.53274 6.6881 8.04263 8.80425C6.12139 16.7398 4.72948 26.033 4.03352 33.7789C2.99448 47.2345 0.230258 60.3806 0.00480642 73.8461C-0.152029 77.9487 3.55321 89.328 7.62113 81.063C9.02285 77.3697 9.6992 73.2073 10.5716 69.3543C12.1106 62.0076 12.6497 54.4613 14.1004 47.0248C14.9826 42.1537 16.1981 37.5121 15.9726 32.5911C15.4923 25.3243 13.8357 17.3288 12.7477 9.44309C12.1596 6.60824 11.9047 1.3478 10.8069 0.000245649H10.7774Z";
const LEG_PATH =
  "M87.9145 140.163C84.0879 138.762 77.4422 146.755 74.7587 149.778C67.8515 157.573 68.52 164.403 69.8762 175.559C71.5619 190.274 72.0365 207.554 73.4703 221.325C73.8191 226.714 76.0181 240.593 82.5088 232.55C86.2094 227.28 88.0695 219.436 88.8638 212.675C90.7432 195.086 89.3192 177.846 89.7648 160.098C89.5323 155.574 91.2179 142.45 87.9823 140.203L87.9145 140.163Z";