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

export default function SKBedaBiodataDiri({ 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.25" }}>
      {/* HEADER */}
      <div style={{ textAlign: "center", marginBottom: "15px" }}>
        <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" }}>
        <b>
          <u>SURAT KETERANGAN BEDA BIODATA DIRI</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>{data.setting.perbekelNama}</td>
            </tr>
            <tr>
              <td>Jabatan</td>
              <td>:</td>
              <td>
                {data.setting.perbekelJabatan + " " + data.setting.desaNama}
              </td>
            </tr>
            <tr>
              <td>Kecamatan</td>
              <td>:</td>
              <td>{data.setting.desaKecamatan}</td>
            </tr>
            <tr>
              <td>Kabupaten</td>
              <td>:</td>
              <td>{data.setting.desaKabupaten}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* IDENTITAS ORANG YG MEMINTA SURAT */}
      <div style={{ marginTop: "15px" }}>
        Dengan ini menerangkan bahwa berdasarkan keterangan dari yang
        bersangkutan:
        <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>Tempat/Tanggal Lahir</td>
              <td>:</td>
              <td>{`${getValue("tempat_lahir")}, ${getValue("tanggal_lahir")}`}</td>
            </tr>
            <tr>
              <td>Jenis Kelamin</td>
              <td>:</td>
              <td>{getValue("jenis_kelamin")}</td>
            </tr>
            <tr>
              <td>Alamat</td>
              <td>:</td>
              <td>{getValue("alamat")}</td>
            </tr>
            <tr>
              <td>Pekerjaan</td>
              <td>:</td>
              <td>{getValue("pekerjaan")}</td>
            </tr>
            <tr>
              <td>NIK</td>
              <td>:</td>
              <td>{getValue("nik")}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: "15px" }}>
        Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>,
        meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa
        dokumen, sebagai berikut:
      </div>

      <div style={{ marginTop: "15px" }}>
        <table style={{ width: "100%", marginTop: "5px" }}>
          <tbody>
            <tr>
              <td style={{ width: "160px" }}>1. {getValue("data_dokumen")}</td>
              <td style={{ width: "10px" }}></td>
              <td>{/* {getValue("nama")} */}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen A</td>
              <td>:</td>
              <td>{getValue("dokumen_a")}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen B</td>
              <td>:</td>
              <td>{getValue("dokumen_b")}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* <div style={{ marginTop: "15px" }}>
        <table style={{ width: "100%", marginTop: "5px" }}>
          <tbody>
            <tr>
              <td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td>
              <td style={{ width: "10px" }}>:</td>
              <td>{getValue("tempat_lahir")}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen A</td>
              <td>:</td>
              <td>{getValue("dokumen_a")}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen B</td>
              <td>:</td>
              <td>{getValue("tertulis pada dokumen b")}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: "15px" }}>
        <table style={{ width: "100%", marginTop: "5px" }}>
          <tbody>
            <tr>
              <td style={{ width: "160px" }}>3. Nama Orang Tua</td>
              <td style={{ width: "10px" }}>:</td>
              <td>{getValue("nama orang tua")}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen A</td>
              <td>:</td>
              <td>{getValue("tertulis pada dokumen a")}</td>
            </tr>
            <tr>
              <td>Tertulis pada dokumen B</td>
              <td>:</td>
              <td>{getValue("tertulis pada dokumen b")}</td>
            </tr>
          </tbody>
        </table>
      </div> */}

      <div style={{ marginTop: "15px" }}>
        Perbedaan tersebut terjadi karena{" "}
        <b>kesalahan penulisan/pencatatan administratif</b>, namun yang
        bersangkutan adalah <b>orang yang sama</b>.
        <br />
        Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk
        dipergunakan sebagaimana mestinya.
      </div>

      <div style={{ marginTop: "15px" }}>
        Dikeluarkan di {data.setting.desaNama} <br />
        Pada tanggal {data.surat.createdAt}
      </div>

      {/* TANDA TANGAN */}
      <div
        style={{
          marginTop: "0px",
          display: "flex",
          justifyContent: "flex-end",
          width: "100%",
        }}
      >
        <div style={{ textAlign: "center" }}>
          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>
  );
}