let picFile;

function sendFaxText() {
    /** @type {any} */
    const message = document.getElementById("fax-message");
    if (!message?.value) {
        return;
    }
    console.log(message.value);
    fetch("/fax/send", {body: JSON.stringify({type: "text", content: message.value}), method: "POST"});
    message.value = "";
}

function sendFaxPic() {
    if (!picFile) {
        console.log("nopic");
        return;
    }
    const data = new FormData();
    data.append('file', picFile);
    clearPicFile();
    fetch("/fax/pic", {body: data, method: "POST"});
}

document.addEventListener("DOMContentLoaded", async function() {
  const faxClients = await (await fetch("/fax/get_printers", {method: "GET"})).json();
  const faxClientList = document.getElementById("fax-clients");
  for (faxClient of faxClients) {
    console.log(faxClient);
    console.log(faxClientList);
    const faxClientEl = document.createElement("div");
    faxClientEl.classList.add("fax-client");
    faxClientEl.textContent = faxClient;
    faxClientList.appendChild(faxClientEl);
  }

  
  const fileInput = document.getElementById("fax-image");
  fileInput.addEventListener("change", (e) => {
      setPicFile(e.target.files[0]);
  });

});

window.addEventListener("dragover", (e) => {
    e.preventDefault();
});

window.addEventListener("drop", (e) => {
  e.preventDefault();
  const item = e.dataTransfer.items[0];
  if (item.kind === "file") {
    const pic = document.getElementById("fax-image");
    setPicFile(item.getAsFile());
    // pic.value = e.dataTransfer.items[0].getAsFile();
  } else if (item.kind === "string") {
    if (item.type === "text/html") {
      console.log(item);
      item.getAsString((string) => {
        var div = document.createElement('div');
        div.innerHTML = string.trim();
        console.log(string);
        const src = string.match(/src="(.+?)"/)?.[1];
        setPicSrc(src);
      });
    }
  }
});

function setPicSrc(src) {
  document.getElementById("pic-upload-lbl").textContent = src;
  
  

  const img = new Image();
  img.onload = () => {
    const cWidth = 512;
    const cHeight = (512 / img.width) * img.height;

    const canvas = document.getElementById("preview-canvas");
    canvas.setAttribute("height", cHeight)
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,cWidth,cHeight);

    const imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(let y = 0; y < imgPixels.height; y++){
        for(let x = 0; x < imgPixels.width; x++){
            const i = (y * 4) * imgPixels.width + x * 4;
            const avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
  };
  img.src = src;
}

function setPicFile(file) {
  console.log(file);
  picFile = file;
  document.getElementById("pic-upload-lbl").textContent = file.name;
  
  const img = new Image();
  
  const fr = new FileReader();
  fr.onload = () => {
    img.onload = () => {
      const cWidth = 512;
      const cHeight = (512 / img.width) * img.height;

      const canvas = document.getElementById("preview-canvas");
      canvas.setAttribute("height", cHeight)
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img,0,0,cWidth,cHeight);

      const imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for(let y = 0; y < imgPixels.height; y++){
          for(let x = 0; x < imgPixels.width; x++){
              const i = (y * 4) * imgPixels.width + x * 4;
              const avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
              imgPixels.data[i] = avg; 
              imgPixels.data[i + 1] = avg; 
              imgPixels.data[i + 2] = avg;
          }
      }
      ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
    };
    img.src = fr.result;
  };
  fr.readAsDataURL(file);
}

function clearPicFile() {
  picFile = undefined;
  document.getElementById("pic-upload-lbl").textContent = "Upload an Image";
  
  const canvas = document.getElementById("preview-canvas");
  canvas.setAttribute("height", 0)
}