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

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

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

         const urlApi = '/api/pengaduan/image?folder=syarat-dokumen&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.5" }}>
         {/* TITLE */}
         <div style={{ textAlign: "center", marginBottom: "20px" }}>
            <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b><br />
            Nomor: {data.surat.noSurat}
         </div>

         {/* ISI */}
         <div>
            <div style={{ marginBottom: "10px" }}>
               Yang bertanda tangan dibawah ini, saya:
            </div>

            {/* DATA PEJABAT */}
            <div>
               <Row label="Nama" value={data.setting.perbekelNama} />
               <Row label="Jabatan" value={data.setting.perbekelJabatan} />
               <Row label="Alamat" value={data.setting.desaAlamat} />
            </div>

            <br />

            <div>Dengan ini menerangkan bahwa:</div>

            {/* DATA WARGA */}
            <div>
               <Row label="Nama Pemilik Usaha" value={getValue("nama")} />
               <Row label="Tempat/Tanggal Lahir" value={getValue("tempat tanggal lahir")} />
               <Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
               <Row label="Nomor KTP" value={getValue("nik")} />
            </div>

            <br />

            <div>Benar yang bersangkutan memiliki tempat usaha dengan keterangan seperti berikut:</div>

            <div>
               <Row label="Nama Usaha" value={getValue("nama usaha")} />
               <Row label="Bidang Usaha" value={getValue("bidang usaha")} />
               <Row label="Alamat Usaha" value={getValue("alamat usaha")} />
               <Row label="Status Tempat Usaha" value={getValue("status tempat usaha")} />
               <Row label="Luas Tempat Usaha" value={getValue("luas tempat usaha")} />
               <Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
            </div>

            <p style={{ textAlign: "justify" }}>
               Surat keterangan ini dibuat untuk keperluan <b>{getValue("alasan permohonan")}.</b>
            </p>

            <p style={{ textAlign: "justify" }}>
               Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
            </p>

            <div>
               <Row label="Dikeluarkan di" value={data.setting.desaNama} />
               <Row label="Pada tanggal" value={data.surat.createdAt} />
            </div>

            <br /><br />

            {/* TANDA TANGAN */}
            <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
               <div style={{ textAlign: "center" }}>
                  {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
                  <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
                  <u>{data.setting.perbekelNama}</u><br />
                  {data.setting.perbekelJabatan + " " + data.setting.desaNama}
               </div>
            </div>
         </div>
      </div>
   );
}

function Row({ label, value }: { label: string, value: string }) {
   return (
      <div style={{ display: "flex", marginBottom: "4px" }}>
         <div style={{ width: "180px" }}>{label}</div>
         <div style={{ width: "10px" }}>:</div>
         <div>{value}</div>
      </div>
   );
}