import { StyleSheet, Text, View } from "@react-pdf/renderer";
import { getBracket, jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import React from "react";
import { distanceConversion } from "utils";

interface Props {
  bin: jsonBin;
  borderColour: string;
}

export default function MountingTableRow(props: Props) {
  const styles = StyleSheet.create({
    orbit: {
      width: "14%",
      textAlign: "left",
      borderRightColor: props.borderColour,
      borderRightWidth: 1,
      paddingLeft: 8
    },
    centerDist: {
      width: "25%",
      textAlign: "left",
      borderRightColor: props.borderColour,
      borderRightWidth: 1,
      paddingLeft: 8
    },
    roofDist: {
      width: "33%",
      textAlign: "left",
      paddingLeft: 8,
      borderRightColor: props.borderColour,
      borderRightWidth: 1
    },
    bracket: {
      width: "28%",
      textAlign: "center",
      fontSize: 8
    }
  });

  const roofDist = (distance: number) => {
    return distance / Math.cos(props.bin.RoofAngle * (Math.PI / 180));
  };

  const rows = () => {
    let r: JSX.Element[] = [];
    props.bin.CableSums.forEach((orbit, i) => {
      let bracketType = "None"
      let bracket = getBracket(orbit.Bracket)
      if(orbit.Orbit !== 0 && bracket !== undefined) {
        bracketType = bracket.Name + " (" + orbit.NumberOfCables + ")"
      }else {
        bracketType = "Unk"
      }

      r.push(
        <View
          style={{
            flexDirection: "row",
            borderBottomColor: props.borderColour,
            borderBottomWidth: i === props.bin.CableSums.length - 1 ? 0 : 1,
            alignItems: "center",
            height: 24
          }}
          key={i}>
          <Text style={styles.orbit}>{orbit.Orbit === 0 ? "C" : orbit.Orbit}</Text>
          <Text style={styles.centerDist}>
            {distanceConversion(orbit.DistanceFromCenter).toFixed(2)}
          </Text>
          <Text style={styles.roofDist}>
            {distanceConversion(roofDist(orbit.DistanceFromCenter)).toFixed(2)}
          </Text>
          <Text style={styles.bracket}>
            {bracketType}
          </Text>
        </View>
      );
    });
    return r;
  };

  return <React.Fragment>{rows()}</React.Fragment>;
}