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

export default function SKTidakMampu({ 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=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.5" }}>
      {/* TITLE */}
      <div style={{ textAlign: "center", marginBottom: "20px" }}>
        <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</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="Alamat" value={data.setting.desaAlamat} />
          <Row label="Jabatan" value={data.setting.perbekelJabatan} />
        </div>

        <br />

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

        {/* DATA WARGA */}
        <div>
          <Row label="NIK" value={getValue("nik")} />
          <Row label="Nama" value={getValue("nama")} />
          <Row
            label="Tempat Tgl Lahir"
            value={`${getValue("tempat_lahir")}, ${getValue("tanggal_lahir")}`}
          />
          <Row label="Alamat" value={getValue("alamat")} />
        </div>

        <br />

        <p style={{ textAlign: "justify" }}>
          Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan
          termasuk keluarga tidak mampu. Surat keterangan ini dipergunakan untuk
          <b>{getValue("alasan")}.</b>
        </p>

        <p style={{ textAlign: "justify" }}>
          Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk
          dapat dipergunakan sebagaimana mestinya.
        </p>

        <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>
  );
}