const list_main_div = document.querySelector("#list_main_div");
const conversation_open = document.querySelector("#conversation_open");
let intervalle_tps_refresh;

/* ************************************************************** */

async function create_new_conv(pseudo) {
  const response = await fetch("/api/conv/creation", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ pseudo: pseudo }),
  });
  const data = await response.json();
  if (response.ok) {
    window.location.href = "/messages";
  }
}

async function search_user_conv() {
  const response = await fetch("/api/conv/search");
  const data = await response.json();

  data.forEach(function (conv) {
    display_conv(conv);
  });
}

async function supprimer_conversation(event, pseudo) {
  event.stopPropagation();
  if (!confirm("Supprimer cette conversation avec camarade " + pseudo + " ?")) return;

  const response = await fetch("/api/conv/delete", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ pseudo: pseudo }),
  });

  if (response.ok) {
    conversation_open.replaceChildren();
    list_main_div.replaceChildren();
    search_user_conv();
  }
}

function display_conv(conv) {
  const list_div = document.createElement("div");
  list_div.classList.add(
    "mt-5",
    "bg-white",
    "rounded-lg",
    "shadow-md",
    "p-6",
    "grow"
  );

  const conv_row = document.createElement("div");
  conv_row.classList.add("flex", "items-center", "gap-2", "cursor-pointer");

  conv_row.addEventListener("click", function () {
    conversation_open.replaceChildren();
    open_conversation(conv.pseudo, conv.avatar);
  });

  const user_avatar_div = document.createElement("div");
  user_avatar_div.classList.add(
    "w-9",
    "h-9",
    "rounded-full",
    "bg-white",
    "flex",
    "items-center",
    "justify-center",
    "flex-shrink-0"
  );

  const user_avatar_image = document.createElement("img");
  user_avatar_image.classList.add(
    "w-full",
    "h-full",
    "object-cover",
    "rounded-full"
  );
  user_avatar_image.src = conv.avatar;

  const user_pseudo = document.createElement("p");
  user_pseudo.classList.add("flex");
  user_pseudo.textContent = conv.pseudo;

  const btn_delete = document.createElement("button");
  btn_delete.textContent = "Supprimer";
  btn_delete.classList.add(
    "ml-auto",
    "text-gray-400",
    "hover:text-red-500",
    "text-lg",
    "transition-colors",
    "cursor-pointer"
  );

  btn_delete.addEventListener("click", function (event) {
    supprimer_conversation(event, conv.pseudo);
  });

  list_main_div.append(list_div);
  list_div.append(conv_row);
  user_avatar_div.append(user_avatar_image);
  conv_row.append(user_avatar_div);
  conv_row.append(user_pseudo);
  conv_row.append(btn_delete);
}

/* ************************************************************** */

async function open_conversation(conv_pseudo, conv_avatar) {
  const list_div = document.createElement("div");
  list_div.classList.add(
    "mt-5",
    "bg-white",
    "rounded-lg",
    "shadow-md",
    "p-6",
    "grow"
  );

  const conv_row = document.createElement("div");
  conv_row.classList.add("flex", "items-center", "gap-2");

  const user_avatar_div = document.createElement("div");
  user_avatar_div.classList.add(
    "w-9",
    "h-9",
    "rounded-full",
    "bg-white",
    "flex",
    "items-center",
    "justify-center",
    "flex-shrink-0"
  );

  const user_avatar_image = document.createElement("img");
  user_avatar_image.classList.add(
    "w-full",
    "h-full",
    "object-cover",
    "rounded-full"
  );
  user_avatar_image.src = conv_avatar;

  const user_pseudo = document.createElement("p");
  user_pseudo.classList.add("flex");
  user_pseudo.textContent = conv_pseudo;

  const messages_div = document.createElement("div");
  messages_div.classList.add("flex", "flex-col", "gap-2", "mt-4", "overflow-y-auto", "h-125");

  const message_text_input = document.createElement("input");
  message_text_input.type = "text";
  message_text_input.classList.add("flex", "mt-4", "w-full");
  message_text_input.placeholder = "Ecris ton message";

  message_text_input.addEventListener("keydown", async function (event) {
    if (event.key === "Enter") {
      await send_message(message_text_input.value, conv_pseudo, messages_div);
      message_text_input.value = "";
    }
  });

  const profil_ami = document.createElement("a");
  profil_ami.href = "/profil?pseudo=" + conv_pseudo;
  profil_ami.classList.add("flex", "items-center", "gap-2");
  profil_ami.append(user_avatar_div);
  profil_ami.append(user_pseudo);

  user_avatar_div.append(user_avatar_image);
  conversation_open.append(list_div);
  list_div.append(conv_row);
  conv_row.append(profil_ami);
  list_div.append(messages_div);
  list_div.append(message_text_input);

  await charger_messages(conv_pseudo, messages_div);

  clearInterval(intervalle_tps_refresh);
   intervalle_tps_refresh = setInterval(function () {
    charger_messages(conv_pseudo, messages_div);
  }, 2000);

}

/* ******************************************************************************* */

async function send_message(message, conv_pseudo, messages_div) {
  const response = await fetch("/api/conv/send_message", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: message, pseudo: conv_pseudo }),
  });
  const data = await response.json();
  if (response.ok) {
    afficher_message(message, "Moi", messages_div);
  }
}

async function charger_messages(conv_pseudo, messages_div) {
  const response = await fetch("/api/conv/messages?pseudo=" + conv_pseudo);
  const data = await response.json();

  messages_div.replaceChildren();

  data.forEach(function (msg) {
    afficher_message(msg.contenu, msg.pseudo, messages_div);
  });
}

function afficher_message(contenu, pseudo, messages_div) {
  const msg_div = document.createElement("div");
  msg_div.classList.add("flex", "flex-col", "gap-1");

  const auteur = document.createElement("span");
  auteur.classList.add("text-xs", "text-gray-500");
  auteur.textContent = pseudo;

  const bulle = document.createElement("div");
  bulle.classList.add("bg-gray-100", "rounded-xl", "px-4", "py-2");
  bulle.textContent = contenu;

  msg_div.append(auteur);
  msg_div.append(bulle);
  messages_div.append(msg_div);
}




/* *************************************************************************** */


const modal_conv = document.querySelector("#modal-conv");
const btn_nouvelle_conv = document.querySelector("#btn-nouvelle-conv");
const btn_fermer_modal_conv = document.querySelector("#btn-fermer-modal-conv");
const btn_amis = document.querySelectorAll(".ami-conv-btn");
const input_recherche_ami = document.querySelector("#recherche-ami-conv");

btn_nouvelle_conv.addEventListener("click", function () {
  input_recherche_ami.value = "";
  btn_amis.forEach(function (btn_ami) {
    btn_ami.classList.remove("hidden");
  });
  modal_conv.classList.remove("hidden");
});

btn_fermer_modal_conv.addEventListener("click", function () {
  modal_conv.classList.add("hidden");
});

modal_conv.addEventListener("click", function (event) {
  if (event.target === modal_conv) {
    modal_conv.classList.add("hidden");
  }
});

btn_amis.forEach(function (btn_ami) {
  btn_ami.addEventListener("click", function () {
    const pseudo = btn_ami.dataset.pseudo;
    modal_conv.classList.add("hidden");
    create_new_conv(pseudo);
  });
});

/* ************************************************ */

input_recherche_ami.addEventListener("input", function () {
  const recherche = input_recherche_ami.value.toLowerCase();

  btn_amis.forEach(function (btn_ami) {
    const pseudo = btn_ami.dataset.pseudo.toLowerCase();

    if (pseudo.includes(recherche)) {
      btn_ami.classList.remove("hidden");
    } else {
      btn_ami.classList.add("hidden");
    }
  });
});

/* ************************************************* */

search_user_conv();