import './style.css'

function edit(e: PointerEvent) {
  e.preventDefault();
  const tar = e.target as HTMLInputElement;
  const form = tar.parentNode as HTMLFormElement
  form.onseeked
  const id = tar.dataset.id;
  const tds = document.querySelectorAll(`[data-id="${id}"]`) as NodeListOf<HTMLElement>
  const names = ["name", "thumbnail", "author", "magazine",]
  tds.forEach((el, i) => {
    if (el.tagName === "TD") {
      const v = el.innerHTML;
      el.innerHTML = `<input name="${names[i]}" value="${v}">`
    } else if (el === tar) {
      el.style.display = "none"
    } else {
      const iel = (el as HTMLInputElement)
      if (iel.type !== "hidden") {
        iel.value = "Save"
        el.onclick = e => save(e, tds);
      }
    }
  })
}
//@ts-expect-error
window.edit = edit;

async function save(e: MouseEvent, tds: NodeListOf<HTMLElement>) {
  console.log(tds)
  const tar = e.target as HTMLInputElement
  const body = new FormData();
  e.preventDefault();
  let i = 0;
  tds.forEach((el) => {
    if (el.tagName === "TD") {
      const v = (el.firstChild as HTMLInputElement).value;
      el.innerHTML = v
      switch (i) {
        case 0: body.append("name", v); break;
        case 1: body.append("thumbnail", v); break;
        case 2: body.append("author", v); break;
        case 3: body.append("magazine", v); break;
      }
      i++;
    } else if (el === tar) {
      const iel = (el as HTMLInputElement)
      iel.value = "Remove"
      iel.onclick = null;
    } else {
      const iel = (el as HTMLInputElement)
      if (iel.type === "hidden") {
        body.append(iel.name, iel.value);
      } else {
        iel.style.display = ""
      }
    }
  })
  await fetch("api/add.php", {
    method: "POST",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body
  });
}