import { colors } from "@mui/material";
import { jsonBin } from "common/DataImports/BinCables/BinCableImporter";

interface Props {
  bin: jsonBin;
}

export default function TopView(props: Props) {
  const { bin } = props;
  const totalRadius = 25;

  const outerEdge = () => {
    return (
      <circle
        cx="50%"
        cy="50%"
        r={totalRadius}
        stroke={colors.grey[400]}
        strokeWidth="1"
        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="1"
          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={1.5}
            cx="50%"
            cy="50%"
            transform={"translate(" + x + " " + y + ")"}
            fill={"blue"}
          />
        );
        currentAngle += angleDist;
      }
    });
    return o;
  };

  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" height="100%" width="100%">
      {outerEdge()}
      {orbits()}
    </svg>
  );
}
