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

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

  return (
    <g className={className} data-organ="metabolism">
      <path
        d={METABOLISM_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={TOP_ARROW_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path
        d={BOTTOM_ARROW_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
    </g>
  );
}

const METABOLISM_PATH =
  "M8.18819 6.4535C9.95429 5.36506 12.0337 5.3371 13.6799 6.40503C14.6837 7.04157 15.4717 8.03486 15.8044 9.27944C15.8329 9.386 15.87 9.5028 15.9368 9.58486C16.0001 9.66691 16.0925 9.71939 16.1867 9.76099C16.4115 9.85673 16.6278 9.9661 16.8087 10.1308L16.8172 10.1388V10.1394C17.9841 11.1748 17.1904 13.2548 15.6389 13.285C15.4426 13.2981 15.2223 13.2041 15.0586 13.3249C14.2797 14.296 13.2634 15.0453 12.02 15.2932C11.8294 15.324 11.665 15.41 11.5766 15.5895C11.1001 16.8444 9.57596 17.1293 8.55682 16.4928C8.04098 16.1885 7.64783 15.5844 7.64782 14.9109C7.6307 14.6652 7.77565 14.3888 7.6929 14.1603C7.66609 14.101 7.61644 14.0429 7.55198 13.9711C6.64525 13.0856 6.10542 11.8848 6.08316 10.6129C6.08145 10.4596 6.0569 10.3041 5.94736 10.1907C5.10626 9.55528 4.68339 8.97114 4.87454 7.86847C5.12276 6.5783 6.47631 5.86368 7.77677 6.38967C7.90687 6.44152 8.05353 6.48712 8.18819 6.4535ZM12.2648 9.22246C13.305 8.68849 12.7909 7.09854 11.6787 7.20796C9.98169 7.37494 10.7503 10.0003 12.2648 9.22246Z";
const TOP_ARROW_PATH =
  "M8.77994 0.215218C16.5962 -1.40543 23.5429 6.41726 20.5927 13.9199C20.6983 14.0003 21.4896 13.5005 21.6921 13.53C21.954 13.5688 22.1109 13.8982 21.9061 14.121C21.6652 14.3826 20.4378 14.6795 20.0795 14.9177C19.9682 14.9576 19.8456 14.9713 19.736 14.9177C19.526 14.8151 19.0061 13.2104 18.8241 12.9192C18.8532 12.522 19.28 12.4023 19.4997 12.7607C19.5454 12.8348 19.873 13.7632 19.9643 13.6925C21.675 9.31139 19.7868 4.49376 15.8517 2.10033C12.8394 0.26822 9.225 0.262476 6.12306 1.8957C5.48912 1.71335 5.74591 1.34582 6.19099 1.10591C6.88431 0.731509 8.00389 0.375919 8.77994 0.215218Z";
const BOTTOM_ARROW_PATH =
  "M2.1115 6.02777C2.27413 6.04658 2.3198 6.12982 2.40083 6.24436C2.49388 6.37668 3.18368 7.97938 3.18433 8.07928C3.18547 8.25764 2.95207 8.46734 2.77346 8.44056C2.47845 8.39555 2.25019 7.58578 2.1606 7.30996C2.03108 7.2866 2.06987 7.31682 2.03393 7.38292C1.93807 7.55673 1.78969 8.06447 1.73263 8.27818C-0.222918 15.585 7.01153 22.1492 14.1569 19.8304C14.4805 19.7256 15.7433 19.1004 15.8865 19.1016C16.1855 19.1033 16.331 19.5034 16.1273 19.7194C16.0364 19.8151 15.0545 20.2294 14.8588 20.304C6.57328 23.4673 -1.74935 15.2898 1.41878 7.02503C1.08211 7.11735 0.425305 7.60743 0.109177 7.33618C-0.0619905 7.18972 -0.0151903 6.99086 0.134309 6.85296C0.254149 6.74184 1.98463 6.01305 2.1115 6.02777Z";