import { StyleSheet, Text, View } from "@react-pdf/renderer";
import { colors } from "@mui/material";
import { jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import CableTableHeader from "./cableTable/cableTableHeader";
import CableTableRow from "./cableTable/cableTableRow";
import PDFSideView from "./pdfSVG/pdfSideView";
import PDFTopView from "./pdfSVG/pdfTopView";
import MountingTableHeader from "./mountingTable/mountingTableHeader";
import MountingTableRow from "./mountingTable/mountingTableRows";

interface Props {
  bin: jsonBin;
}

export default function PdfContent(props: Props) {
  const tableBorderColour = colors.grey[800];

  const styles = StyleSheet.create({
    general: {
      marginTop: 2,
      flexDirection: "row",
      borderTop: "1px solid black",
      borderBottom: "1px solid black",
      paddingTop: 12,
      paddingBottom: 12,
      fontFamily: "Helvetica-Bold",
      fontSize: 20,
      textAlign: "center"
    },
    svgLabels: {
      marginTop: 2,
      flexDirection: "row",
      borderTop: "1px solid black",
      paddingTop: 12,
      textAlign: "left",
      fontFamily: "Helvetica-Bold"
    },
    cableTable: {
      borderColor: tableBorderColour,
      borderWidth: 1
    }
  });
  return (
    <View>
      <View style={styles.general}>
        <Text style={{ width: "34%" }}>{props.bin.Manufacturer}</Text>
        <Text style={{ width: "33%" }}>{props.bin.Model}</Text>
        <Text style={{ width: "33%" }}>{props.bin.Bottom}</Text>
      </View>
      <View style={styles.svgLabels}>
        <Text style={{ width: "50%" }}>Side View</Text>
        <Text style={{ width: "50%" }}>Top View</Text>
      </View>
      <View style={{ height: 280, flexDirection: "row" }}>
        <View style={{ width: 260 }}>
          <PDFSideView bin={props.bin} />
        </View>
        <View style={{ width: 260 }}>
          <View style={{ height: 195 }}>
            <PDFTopView bin={props.bin} />
          </View>
          <View style={{ minHeight: 65 }}>
            <Text style={{ fontFamily: "Helvetica-Bold", marginBottom: 5 }}>Install Guide</Text>
            <View
              style={{ borderColor: tableBorderColour, borderWidth: 1, flexDirection: "column" }}>
              <MountingTableHeader borderColour={tableBorderColour} />
              <MountingTableRow borderColour={tableBorderColour} bin={props.bin} />
            </View>
          </View>
        </View>
      </View>
      <Text style={{ fontFamily: "Helvetica-Bold", marginTop: 12, marginBottom: 5 }}>
        Recommended Cables
      </Text>
      <View style={styles.cableTable}>
        <CableTableHeader borderColour={tableBorderColour} />
        <CableTableRow bin={props.bin} borderColour={tableBorderColour} />
      </View>
    </View>
  );
}