jenna-mcp/src/components/ModalSurat.tsx

import apiFetch from "@/lib/apiFetch";
import { Flex, Loader, Modal, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { useRef, useState } from "react";
import useSWR from "swr";
import SKBedaBiodataDiri from "./surat/SKBedaBiodataDiri";
import SKBelumKawin from "./surat/SKBelumKawin";
import SKDomisiliOrganisasi from "./surat/SKDomisiliOrganisasi";
import SKKelahiran from "./surat/SKKelahiran";
import SKKelakuanBaik from "./surat/SKKelakuanBaik";
import SKKematian from "./surat/SKKematian";
import SKPenghasilan from "./surat/SKPenghasilan";
import SKTempatUsaha from "./surat/SKTempatUsaha";
import SKTidakMampu from "./surat/SKTidakMampu";
import SKUsaha from "./surat/SKUsaha";
import SKYatim from "./surat/SKYatimPiatu";

export default function ModalSurat({
  open,
  onClose,
  surat,
}: {
  open: boolean;
  onClose: () => void;
  surat: string;
}) {
  const A4Style = {
    width: "210mm",
    height: "297mm",
    padding: "20mm",
    background: "#fff",
    color: "#000",
    fontSize: "14px",
    fontFamily: "Times New Roman",
  };
  const [uploading, setUploading] = useState<"Menyiapkan" | "Mengupload" | "Selesai">("Menyiapkan")
  const hiddenRef = useRef<any>(null);
  const { data, mutate, isLoading } = useSWR("surat", () =>
    apiFetch.api.surat.detail.get({
      query: {
        id: surat,
      },
    }),
  );

  useShallowEffect(() => {
    mutate();
  }, []);

  const uploadPdf = async () => {
    try {
      setUploading("Mengupload");
      const element = hiddenRef.current;
      const canvas = await html2canvas(element, {
        scale: 2,
        useCORS: true,
        allowTaint: true,
        width: element.offsetWidth,
        height: element.offsetHeight,
      });

      const imgData = canvas.toDataURL("image/jpeg", 1.0);

      const pdf = new jsPDF("p", "mm", "a4");
      const pageWidth = 210; // A4 width mm
      const pageHeight = 297; // A4 height mm

      const imgWidth = pageWidth;
      const imgHeight = (canvas.height * pageWidth) / canvas.width;

      pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);

      // ⬇️ ambil sebagai Blob
      const pdfBlob = pdf.output("blob");

      const pdfFile = new File(
        [pdfBlob],
        `${data?.data?.surat?.nameCategory}.pdf`,
        {
          type: "application/pdf",
          lastModified: Date.now(),
        }
      );

      const resImg = await apiFetch.api.pengaduan.upload.post({
        file: pdfFile,
        folder: "surat",
      });

      console.log(resImg.data)
    } catch (error) {
      console.error("Error uploading PDF:", error);
    } finally {
      setUploading("Selesai");
      setTimeout(() => {
        onClose();
      }, 1000)
    }
  }

  useShallowEffect(() => {
    setTimeout(() => {
      uploadPdf();
    }, 5000);
  }, [surat]);

  return (
    <>
      <Modal
        opened={open}
        onClose={() => onClose()}
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
        size="auto"
        withCloseButton={false}
        removeScrollProps={{ allowPinchZoom: true }}
        styles={{
          header: {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "12px 16px",
          },
          title: {
            width: "100%",
          },
        }}
        title={
          <Flex justify="space-between" align="center" w="100%">
            <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>

            <Flex gap={8} align="center">
              <Loader color="blue" size="xs" />
              <Text size="sm">{uploading}</Text>
            </Flex>
          </Flex>
        }
      >
        <div ref={hiddenRef} style={A4Style}>
          {data && data.data ? (
            data.data.surat.idCategory == "skusaha" ? (
              <SKUsaha data={data.data} />
            ) : data.data.surat.idCategory == "skkelahiran" ? (
              <SKKelahiran data={data.data} />
            ) : data.data.surat.idCategory == "skkelakuanbaik" ? (
              <SKKelakuanBaik data={data.data} />
            ) : data.data.surat.idCategory == "skpenghasilan" ? (
              <SKPenghasilan data={data.data} />
            ) : data.data.surat.idCategory == "sktidakmampu" ? (
              <SKTidakMampu data={data.data} />
            ) : data.data.surat.idCategory == "skyatimpiatu" ? (
              <SKYatim data={data.data} />
            ) : data.data.surat.idCategory == "skdomisiliorganisasi" ? (
              <SKDomisiliOrganisasi data={data.data} />
            ) : data.data.surat.idCategory == "skbedabiodata" ? (
              <SKBedaBiodataDiri data={data.data} />
            ) : data.data.surat.idCategory == "sktempatusaha" ? (
              <SKTempatUsaha data={data.data} />
            ) : data.data.surat.idCategory == "skbelumkawin" ? (
              <SKBelumKawin data={data.data} />
            ) : data.data.surat.idCategory == "skkematian" ? (
              <SKKematian data={data.data} />
            ) : (
              <></>
            )
          ) : (
            <></>
          )}
        </div>
      </Modal>
    </>
  );
}