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

export function Cell({ style, colorScale, isActive = false, className }: OrganSvgProps) {
  const defaultColor = colorScale[100];
  const activeColor = colorScale[200];
  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
  const highlightFill = colorScale.alpha[200];

  return (
    <g className={className} data-organ="cell">
      <path
        d={CELL_A_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_A_HIGHLIGHT_PATH}
        fill={highlightFill}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_B_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_B_HIGHLIGHT_PATH}
        fill={highlightFill}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_C_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_C_HIGHLIGHT_PATH}
        fill={highlightFill}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_D_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={CELL_D_HIGHLIGHT_PATH}
        fill={highlightFill}
        style={{ transition: TRANSITION_STYLE }}
      />
    </g>
  );
}

const CELL_A_PATH =
  "M1.55326 11.38C-0.381257 10.7111 -0.556186 7.81929 1.29601 6.4029C2.93212 5.14388 5.02099 5.95044 5.24737 7.94716C5.49433 10.0914 3.40546 12.0193 1.55326 11.38Z";
const CELL_A_HIGHLIGHT_PATH =
  "M3.05597 10.1119C2.52089 9.89551 2.46944 8.94141 2.98394 8.47912C3.4367 8.066 4.01294 8.33158 4.07468 8.98076C4.14671 9.67912 3.57047 10.3185 3.05597 10.1119Z";
const CELL_B_PATH =
  "M9.66139 5.60695C11.1534 6.20695 11.2872 8.48891 10.6081 9.77744C9.39385 12.0594 6.72874 11.0561 6.8728 8.26269C6.95512 6.69875 8.16934 5.00695 9.66139 5.61678V5.60695Z";
const CELL_B_HIGHLIGHT_PATH =
  "M9.16759 6.37354C9.72325 6.61945 9.72325 7.426 9.43513 7.85879C8.93092 8.626 7.93279 8.21289 8.04598 7.22928C8.10772 6.6883 8.61193 6.11781 9.1573 6.37354H9.16759Z";
const CELL_C_PATH =
  "M1.32755 12.9643C1.67741 12.6397 2.0993 12.3938 2.60351 12.4233C3.29294 12.4626 3.97208 13.0233 3.68396 14.4987C3.39584 15.9741 4.40426 17.0659 2.97395 17.8331C2.39771 18.1479 1.47161 18.02 1.00856 17.5577C-0.113045 16.4266 0.216235 14.0069 1.31726 12.9741L1.32755 12.9643Z";
const CELL_C_HIGHLIGHT_PATH =
  "M1.87342 14.9118C1.54414 14.8921 1.24573 15.3249 1.19428 15.8954C1.15312 16.456 1.3795 16.938 1.70878 16.9577C2.03806 16.9774 2.33647 16.5446 2.38792 15.9741C2.42908 15.4134 2.2027 14.9314 1.87342 14.9118Z";
const CELL_D_PATH =
  "M7.93389 4.55365C7.16214 5.39955 5.90676 6.0389 5.03211 5.79299C4.57935 5.66512 4.18833 5.45857 3.94137 5.06512C3.00498 3.57988 4.87776 0.50119 6.60648 0.048731C7.32678 -0.138154 8.20143 0.206108 8.56158 0.845452C9.18927 1.9766 8.69535 3.70775 7.93389 4.55365Z";
const CELL_D_HIGHLIGHT_PATH =
  "M5.96831 1.60318C5.72135 1.43597 5.27888 1.64253 4.99076 2.04581C4.70264 2.45892 4.67177 2.92122 4.92902 3.07859C5.17598 3.24581 5.61845 3.03925 5.90657 2.63597C6.19469 2.23269 6.22556 1.76056 5.96831 1.60318Z";