import { Button, DialogActions, DialogContent } from "@mui/material";
import { PDFViewer, StyleSheet } from "@react-pdf/renderer";
import AgPDFTemplate from "common/pdfTemplates/Agriculture/agPDFTemplate";
import ResponsiveDialog from "common/ResponsiveDialog";
import { useMobile } from "hooks";
import { jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import PdfContent from "./pdfComponents/pdfContent";

interface Props {
  bin: jsonBin;
  open: boolean;
  close: () => void;
}

export default function CableQuote(props: Props) {
  const { open, close, bin } = props;
  const isMobil = useMobile();
  const pdfStyle = StyleSheet.create({
    viewerDesktop: {
      height: 500 * 1.44,
      width: 500
    },
    viewerMobile: {
      height: "100%",
      width: "100%"
    }
  });

  const pdfDoc = () => {
    return <AgPDFTemplate content={<PdfContent bin={bin} />} />;
  };

  return (
    <ResponsiveDialog open={open} onClose={close}>
      <DialogContent>
        <PDFViewer style={isMobil ? pdfStyle.viewerMobile : pdfStyle.viewerDesktop}>
          {pdfDoc()}
        </PDFViewer>
      </DialogContent>
      <DialogActions>
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            close();
          }}>
          Close
        </Button>
      </DialogActions>
    </ResponsiveDialog>
  );
}
