class Post {
  content;
  signing;
  post_at;
  media;
  id;
  constructor(id, content, signing, post_at, media) {
    this.id = id;
    this.content = content;
    this.signing = signing;
    this.post_at = post_at;
    this.media = media;
  }
  verify(check) {
    this.check = check;
  }
  get verify_blk() {
    return {
      post: this.id,
      check: this.check,
    };
  }
}
const Fetch = async () => {
  let result = await fetch("/api/admin/fetch_post", {
    credentials: "include",
  });
  return (await result.json()).map((e) => {
    return new Post(e.id, e.content, e.signing, e.post_at, e.enclosure);
  });
};
let sending = [];

document.addEventListener("DOMContentLoaded", function () {
  let verix_container = document.getElementById("verix_container");

  const verify = (id, obj, ck) => {
    obj.verify(ck);
    sending.push(obj);
    let child = document.getElementById(`post-${id}`);
    verix_container.removeChild(child);
  };

  let hv = document.getElementById("hv");
  const disable_display = () => {
    hv.classList.add("hidden");
  };
  hv.onclick = disable_display;

  const hover_display_img = (src) => {
    hv.classList.remove("hidden");
    console.log(hv.children);
    hv.children[0].src = src;
  };

  Fetch()
    .then((e) => {
      if (e.length == 0) {
        let nothing = document.createElement("div");
        nothing.appendChild(document.createTextNode("Nothing!!!"));
        nothing.className = "text-slate-300 text-3xl mx-auto";
        verix_container.appendChild(nothing);
      } else
        e.forEach((x) => {
          let post = document.createElement("div");
          post.className =
            "rounded bg-zinc-800 w-full h-fit text-slate-200 px-2 relative break-all";
          let post_content = document.createElement("p");
          post_content.className = "h-fit text-md min-h-20  mr-[30px]";
          post_content.appendChild(document.createTextNode(x.content));
          post.appendChild(post_content);

          let media = document.createElement("div");
          media.className = "w-full flex flex-row gap-2 h-fit overflow-x-auto";
          post.appendChild(media);

          if (x.media) {
            x.media.forEach((src) => {
              let media_cell = document.createElement("img");
              media_cell.className = "h-30 w-auto my-auto";
              media_cell.src = `/static/${src}`;
              media_cell.onclick = () => {
                hover_display_img(media_cell.src);
              };
              media.appendChild(media_cell);
            });
          }

          let btm_bar = document.createElement("div");
          let msg = document.createElement("p");
          msg.className = "text-sm border-t-3";
          msg.appendChild(
            document.createTextNode(
              `id: ${x.id}, ${x.signing ? "sign: " + x.signing + ", " : ""}post_at: ${new Date(x.post_at).toDateString()}`,
            ),
          );
          btm_bar.appendChild(msg);
          post.appendChild(btm_bar);

          let right_bar = document.createElement("div");
          right_bar.classList =
            "h-10 w-fit absolute right-0 top-0 flex flex-col gap-2 text-lg";
          post.appendChild(right_bar);
          let btn_cls = "rounded-2xl w-[30px] h-[30px] bg-zinc-400";
          let revoke = document.createElement("button");
          revoke.className = btn_cls;
          revoke.onclick = () => {
            verify(x.id, x, false);
          };
          revoke.appendChild(document.createTextNode("X"));
          let issue = document.createElement("button");
          issue.className = btn_cls;
          issue.onclick = () => {
            verify(x.id, x, true);
          };
          issue.appendChild(document.createTextNode("Y"));
          right_bar.appendChild(revoke);
          right_bar.appendChild(issue);
          post.id = `post-${x.id}`;

          verix_container.appendChild(post);
        });
    })
    .catch((err) => {
      alert(err);
    });

  const sendbtn = document.getElementById("send");

  const send = () => {
    sendbtn.disabled = true;
    sendbtn.classList.remove("text-zinc-200");
    sendbtn.classList.add("text-zinc-400");
    if (sending.length > 0) {
      fetch("/api/admin/verify_post", {
        body: JSON.stringify({ choice: sending.map((e) => e.verify_blk) }),
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        method: "PUT",
      })
        .then(async (resp) => {
          if (resp.status == 200) {
            sending = [];
            alert("成功");
          } else {
            alert(`Err: ${resp.statusText}, ${await resp.text()}`);
          }
        })
        .catch((err) => alert(err))
        .finally(() => {
          sendbtn.disabled = false;
          sendbtn.classList.add("text-zinc-200");
          sendbtn.classList.remove("text-zinc-400");
        });
    } else {
      alert("Nothing");
      sendbtn.classList.add("text-zinc-200");
      sendbtn.classList.remove("text-zinc-400");
      sendbtn.disabled = false;
    }
  };
  sendbtn.onclick = send;
});