const fun = () => {
  btn.onclick = () => {
    const img = document.createElement("img");
    const urlImage = image.files[0].name;
    img.id = "image-file";
    img.src = `/image/${urlImage}`;

    fetch("/image", {
      headers: {
        Accept: "application/json",
        "Content-type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({
        image: urlImage,
      }),
    });

    fetch("message", {
      headers: {
        Accept: "application/json",
        "Content-type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({
        nick: nick.value,
        message: message.value,
        image: urlImage,
      }),
    })
      .then((a) => a.json())
      .then((res) => {
        const chatMessage = document.querySelector("#chatMessage");
        const persone = document.createElement("div");
        const spanNick = document.createElement("span");
        const spanMessage = document.createElement("span");

        persone.id = "persone";
        spanNick.id = "nick-message";
        spanMessage.id = "nick-message";

        spanNick.innerText = res.nick;
        spanMessage.innerText = res.message;

        persone.appendChild(img);
        persone.appendChild(spanNick);
        persone.appendChild(spanMessage);
        chatMessage.appendChild(persone);

        spanMessage.onclick = () => {
          const footer = document.querySelector("footer");
          footer.style.display = "block";

          editMessage.onclick = () => {
            spanMessage.style.background = "blue";
            nick.value = spanNick.innerText;
            message.value = spanMessage.innerText;
            footer.style.display = "none";

            btn.onclick = () => {
              fetch(`/message/${res._id}`, {
                headers: {
                  Accept: "application/json",
                  "Content-type": "application/json",
                },
                method: "PUT",
                body: JSON.stringify({
                  nick: nick.value,
                  message: nick.value,
                }),
              })
                .then((v) => v.json())
                .then(() => {
                  spanNick.innerText = nick.value;
                  spanMessage.innerText = nick.value;
                  spanMessage.style.background = "none";
                  fun();
                });
            };
          };

          deleteMessage.onclick = () => {
            fetch(`/image/${res.image}`, {
              headers: {
                Accept: "application/json",
                "Content-type": "application/json",
              },
              method: "DELETE",
            });
            fetch(`/message/${res._id}`, {
              headers: {
                Accept: "application/json",
                "Content-type": "application/json",
              },
              method: "DELETE",
            })
              .then((d) => d.json())
              .then(() => {
                spanNick.innerText = null;
                spanMessage.innerText = null;
                spanMessage.style.background = "none";
                persone.style.background = "none";
                footer.style.display = "none";
                chatMessage.removeChild(persone);
              });
          };
        };
      });
  };
};
fun();

function getMsg() {
  fetch("/message")
    .then((res) => res.json())
    .then((data) => {
      for (const key of data) {
        const oldMessage = document.querySelector("#oldMessage");
        const persone = document.createElement("div");
        const spanNick = document.createElement("span");
        const spanMessage = document.createElement("span");
        const img = document.createElement("img");
        const urlImage = key.image;
        img.id = "image-file";
        img.src = `/image/${urlImage}`;

        persone.id = "persone";
        spanNick.id = "nick-message";
        spanMessage.id = "nick-message";

        spanNick.innerText = key.nick;
        spanMessage.innerText = key.message;

        persone.appendChild(img);
        persone.appendChild(spanNick);
        persone.appendChild(spanMessage);
        oldMessage.appendChild(persone);

        spanMessage.onclick = () => {
          const footer = document.querySelector("footer");
          footer.style.display = "block";

          editMessage.onclick = () => {
            spanMessage.style.background = "blue";
            key.nick = spanNick.innerText;
            key.message = spanMessage.innerText;
            footer.style.display = "none";

            btn.onclick = () => {
              fetch(`/message/${key._id}`, {
                headers: {
                  Accept: "application/json",
                  "Content-type": "application/json",
                },
                method: "PUT",
                body: JSON.stringify({
                  nick: nick.value,
                  message: nick.value,
                }),
              })
                .then((v) => v.json())
                .then(() => {
                  spanNick.innerText = nick.value;
                  spanMessage.innerText = nick.value;
                  spanMessage.style.background = "none";
                  fun();
                });
            };
          };

          deleteMessage.onclick = () => {
            fetch(`/message/${key._id}`, {
              headers: {
                Accept: "application/json",
                "Content-type": "application/json",
              },
              method: "DELETE",
            })
              .then((d) => d.json())
              .then(() => {
                spanNick.innerText = null;
                spanMessage.innerText = null;
                spanMessage.style.background = "none";
                persone.style.background = "none";
                footer.style.display = "none";
                oldMessage.removeChild(persone);
              });
          };
        };
      }
    });
}
getMsg();

// image.onchange = async () => {
//   url.innerHTML = url.href =
//     "/" +
//     (await (
//       await fetch("/image", {
//         method: "POST",
//         body: image.files[0],
//       })
//     ).text());
// };

image.onchange = () => {
  url.innerHTML = url.href = `/image/${image.files[0].name}`;
};