import React from "react";
import Html from "react-pdf-html";
import arialFont from "@/record-management/fonts/arial.ttf"; // Adjust the path as necessary
import {
  Page,
  Text,
  Font,
  View,
  Image,
  Document,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";

// Register font
Font.register({
  family: "Arial",
  src: arialFont,
});
Font.register({
  family: "Verdana",
  src: arialFont,
});
Font.register({
  family: "sans-serif",
  src: arialFont,
});

const styles = StyleSheet.create({
  page: {
    // fontSize: 12,
    // fontFamily: "Arial",
    paddingTop: 70,
    paddingBottom: 70,
    paddingHorizontal: 35,
    position: "relative",
  },
  headerContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
  },
  footerContainer: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
  },
  headerImage: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
  },
  footerImage: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
  },
  content: {
    marginTop: 60,
    marginBottom: 60,
  },
});

interface PdfViewerProps {
  htmlBody: string;
  header: string;
  footer: string;
}

const RecordLetterPdfObjectPreview: React.FC<PdfViewerProps> = ({
  htmlBody,
  header,
  footer,
}) => {
  const isHeaderImage = typeof header === "string" && header.startsWith("http");
  const isFooterImage = typeof footer === "string" && footer.startsWith("http");

  return (
    <PDFViewer style={{ width: "100%", height: "90vh" }}>
      <Document>
        <Page size="A4" style={styles.page} wrap>
          {/* Header (repeats on every page) */}
          <View style={styles.headerContainer} fixed>
            {isHeaderImage ? (
              <Image src={header} style={styles.headerImage} />
            ) : (
              <Text>{header || "Default Header Text"}</Text>
            )}
          </View>

          {/* Main Content */}
          <View style={styles.content}>
            <Html>{htmlBody}</Html>
          </View>

          {/* Footer (repeats on every page) */}
          <View style={styles.footerContainer} fixed>
            {isFooterImage ? (
              <Image src={footer} style={styles.footerImage} />
            ) : (
              <Text>{footer || "Default Footer Text"}</Text>
            )}
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
};

export default RecordLetterPdfObjectPreview;
