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

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

export default function CableTableRow(props: Props) {
  const styles = StyleSheet.create({
    view: {
      flexDirection: "row",
      borderBottomColor: props.borderColour,
      borderBottomWidth: 1,
      alignItems: "center",
      height: 24,
      fontStyle: "normal",
      fontWeight: 650
    },
    cell: {
      width: "20%",
      textAlign: "left",
      borderRightColor: props.borderColour,
      borderRightWidth: 1,
      paddingLeft: 8
    },
    endCell: {
      width: "20%",
      paddingLeft: 8
    }
  });

  const rows = () => {
    let r: JSX.Element[] = [];
    props.bin.Cables.forEach((cable, i) => {
      r.push(
        <View
          style={{
            flexDirection: "row",
            borderBottomColor: props.borderColour,
            borderBottomWidth: i === props.bin.Cables.length - 1 ? 0 : 1,
            alignItems: "center",
            height: 24
          }}
          key={i}>
          <Text style={styles.cell}>{cable.Orbit === 0 ? "Center" : cable.Orbit}</Text>
          <Text style={styles.cell}>{cable.Type === 2 ? "Moisture" : "Temperature"}</Text>
          <Text style={styles.cell}>{cable.Count}</Text>
          <Text style={styles.cell}>{distanceConversion(cable.Length).toFixed(2)}</Text>
          <Text style={styles.endCell}>{cable.Nodes}</Text>
        </View>
      );
    });
    return r;
  };

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