import { FC, useEffect, useState } from "react";
import { PlayerRanking } from "./types";

interface RaceChartProps {
  players: PlayerRanking[];
  std: boolean;
}

const determineNiceWidth = (width: number) => {
  const max = 1080;
  if (width >= max) return max;
  else if (width > 768) return width * 0.8;
  else return width * 0.96;
};

const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
  const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
  //const [height, setHeight] = useState(window.innerHeight);
  const height = players.length * 40;

  useEffect(() => {
    const handleResize = () => {
      setWidth(determineNiceWidth(window.innerWidth));
      //setHeight(window.innerHeight);
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  const padding = 24;
  const gap = 8;
  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
  const barHeight = (height - 2 * padding) / players.length;
  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);

  return (
    <svg width={width} height={height} id="RaceChartSVG">
      {players.map((player, index) => (
        <rect
          key={String(index)}
          x={4}
          y={index * barHeight + padding}
          width={(1 - player.rank / maxValue) * width}
          height={barHeight - gap} // subtract 2 for some spacing between bars
          fill="#36c"
          stroke="aliceblue"
          strokeWidth={4}
          paintOrder={"stroke fill"}
        />
      ))}

      {players.map((player, index) => (
        <g key={"group" + index}>
          <text
            key={index + "_name"}
            x={8}
            y={index * barHeight + barHeight / 2 + padding + gap / 2}
            width={(1 - player.rank / maxValue) * width}
            height={barHeight - 8} // subtract 2 for some spacing between bars
            fontSize={fontSize}
            fill="aliceblue"
            stroke="#36c"
            strokeWidth={4}
            fontWeight={"bold"}
            paintOrder={"stroke fill"}
            fontFamily="monospace"
            style={{ whiteSpace: "pre" }}
          >
            {`${String(index + 1).padStart(2)}. ${player.name}`}
          </text>
          <text
            key={index + "_value"}
            x={
              8 +
              (4 + Math.max(...players.map((p, _) => p.name.length))) *
                fontSize *
                0.66
            }
            y={index * barHeight + barHeight / 2 + padding + gap / 2}
            width={(1 - player.rank / maxValue) * width}
            height={barHeight - 8} // subtract 2 for some spacing between bars
            fontSize={0.8 * fontSize}
            fill="aliceblue"
            stroke="#36c"
            fontWeight={"bold"}
            fontFamily="monospace"
            strokeWidth={4}
            paintOrder={"stroke fill"}
            style={{ whiteSpace: "pre" }}
          >
            {`${String(player.rank).padStart(5)} ± ${player.std}   N = ${player.n}`}
          </text>
        </g>
      ))}
    </svg>
  );
};
export default RaceChart;