import _ from "lodash";
import { useEffect, useState } from "react";
import notification from "../notificationGlobal";

export default function SKKematian({ data }: { data: any }) {
   const [viewImg, setViewImg] = useState<string>("");
   const getValue = (jenis: string) =>
      _.upperFirst(
         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
      );

   const loadImage = async () => {
      try {
         setViewImg("");
         if (!data.setting.perbekelTTD) return;

         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
         // Fetch manual agar mendapatkan Response asli
         const res = await fetch(urlApi);
         if (!res.ok)
            return notification({
               title: "Error",
               message: "Failed to load image sign",
               type: "error",
            });
         const blob = await res.blob();
         const url = URL.createObjectURL(blob);

         setViewImg(url);
      } catch (err) {
         console.error("Gagal load gambar:", err);
      }
   };

   useEffect(() => {
      loadImage();
   }, [data]);

   return (
      <div style={{ lineHeight: "1.3" }}>
         {/* HEADER */}
         <div style={{ textAlign: "center", marginBottom: "10px" }}>
            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
            Alamat: {data.setting.desaAlamat}<br />
            Kode Pos: {data.setting.desaPos}
         </div>

         {/* JUDUL */}
         <div style={{ textAlign: "center", margin: "20px 0" }}>
            <b><u>SURAT KETERANGAN KEMATIAN</u></b><br />
            Nomor: {data.surat.noSurat}
         </div>

         {/* YANG BERTANDA TANGAN */}
         <div style={{ marginTop: "15px" }}>
            Yang bertanda tangan di bawah ini:
            <table style={{ width: "100%", marginTop: "5px" }}>
               <tbody>
                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
                  <tr><td>Hubungan dengan almarhum/almarhumah</td><td>:</td><td>{getValue("hubungan dengan almarhum")}</td></tr>
               </tbody>
            </table>
         </div>

         <div style={{ marginTop: "20px" }}>
            Melaporkan bahwa:
            <table style={{ width: "100%", marginTop: "5px" }}>
               <tbody>
                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
               </tbody>
            </table>
         </div>

         <div style={{ marginTop: "20px" }}>
            Telah meninggal dunia pada:
            <table style={{ width: "100%", marginTop: "5px" }}>
               <tbody>
                  <tr><td style={{ width: "160px" }}>Tanggal Kematian</td><td style={{ width: "10px" }}>:</td><td>{getValue("tanggal kematian")}</td></tr>
                  <tr><td>Waktu Kematian</td><td>:</td><td>{getValue("waktu kematian")}</td></tr>
                  <tr><td>Tempat Kematian</td><td>:</td><td>{getValue("tempat kematian")}</td></tr>
                  <tr><td>Penyebab Kematian</td><td>:</td><td>{getValue("penyebab kematian")}</td></tr>
               </tbody>
            </table>
         </div>

         <div style={{ marginTop: "20px" }}>
            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
         </div>

         {/* TANDA TANGAN */}
         <div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
            <div style={{ textAlign: "center" }}>
               <br /><br />
               Pemohon
               <br /><br /><br /><br /> <br />
               <u>{getValue("nama")}</u> <br />
            </div>
            <div style={{ textAlign: "center" }}>
               <br />
               Kepala Desa / Lurah {data.setting.desaNama}
               <br /><br />
               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
               <u>{data.setting.perbekelNama}</u> <br />
               NIP. {data.setting.perbekelNIP}
            </div>
         </div>

      </div>
   );
}