import { jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import { Circle, Svg } from "@react-pdf/renderer";
import { colors } from "@mui/material";

interface Props {
  bin: jsonBin;
}

export default function PDFTopView(props: Props) {
  const { bin } = props;
  const totalRadius = 240;

  const outerEdge = () => {
    return (
      <Circle
        cx="50%"
        cy="50%"
        r={totalRadius}
        stroke={colors.grey[400]}
        strokeWidth={4}
        fillOpacity={0}
      />
    );
  };

  const orbits = () => {
    let o: JSX.Element[] = [];
    bin.CableSums.forEach((sum, i) => {
      //get the radius of the bin
      let binRadius = bin.Diameter / 2;
      //determine the percentage the orbit is from the center
      let perc = sum.DistanceFromCenter / binRadius;
      //use the percentage to find the radius for the svg
      let svgRadius = perc * totalRadius;
      o.push(
        <Circle
          key={"orbit" + i}
          cx="50%"
          cy="50%"
          r={svgRadius}
          stroke={colors.grey[400]}
          strokeWidth={4}
          fillOpacity={0}
        />
      );
      //then determine the points the cables will be
      let angleDist = 360 / sum.NumberOfCables;
      let currentAngle = 90;
      for (let k = 0; k < sum.NumberOfCables; k++) {
        let x = svgRadius * Math.sin(currentAngle * (Math.PI / 180));
        let y = svgRadius * Math.cos(currentAngle * (Math.PI / 180));
        o.push(
          <Circle
            key={"orbit" + i + "cable" + k}
            r={12}
            cx="50%"
            cy="50%"
            transform={"translate(" + x + " " + y + ")"}
            fill={"blue"}
          />
        );
        currentAngle += angleDist;
      }
    });
    return o;
  };

  return (
    <Svg viewBox="0 0 500 500" height="100%" width="100%">
      {outerEdge()}
      {orbits()}
    </Svg>
  );
}