const restrictedKeyList = [
  "ControlLeft",
  "ControlRight",
  "ShiftLeft",
  "AltLeft",
  "AltRight",
  "CapsLock",
  "ShiftRight",
  "VolumeUp",
  "VolumeDown",
  "AudioVolumeUp",
  "AudioVolumeDown",
  "Delete",
  "Tab",
  "MetaLeft",
  "MetaRight",
  "Unidentified",
];
const clubsList = document.querySelector("#clubs-list ul");
const clubsFocus = document.querySelector("#clubs-focus");
const buttonsCreateClub = document.querySelectorAll("button.create-club");
const modalCancel = document.querySelector("#btn-annuler-modal");
const inputAvatarUpload = document.querySelector("#avatar-upload");
const avatarPreview = document.querySelector("#avatar-display");
const addClubsSearchButton = document.querySelector("#add-clubs-search");
const addClubsInput = document.querySelector("#add-clubs-input");
let previousSearchId = undefined;

function displayClubsFocus(item, owned) {
  return () => {
    const templateClubsFocus = document.querySelector((owned) ? "#template-clubs-focus-owned" : "#template-clubs-focus-not-owned").content.cloneNode(true);
    const clubLink = templateClubsFocus.querySelector("a");
    const clubAvatar = templateClubsFocus.querySelector(".clubs-focus-avatar");
    const clubName = templateClubsFocus.querySelector(".clubs-focus-name");
    const clubLevel = templateClubsFocus.querySelector(".clubs-focus-level");

    // Supprime tous les éléments enfant de clubs-focus
    clubsFocus.replaceChildren();

    clubLink.href = `/club/${item.dataset.clubId}/view`;
    clubAvatar.src = item.dataset.clubAvatar;
    clubName.textContent = item.dataset.clubName;
    clubLevel.textContent = item.dataset.clubLevel;

    if (!owned) {
      const clubXpBarIndicator = templateClubsFocus.querySelector(".clubs-focus-xp-bar-indicator");
      const clubUserLevel = templateClubsFocus.querySelector(".clubs-focus-user-level");
      const clubUserLevelRatio = templateClubsFocus.querySelector(".clubs-focus-user-level-ratio");

      clubUserLevel.textContent = item.dataset.clubUserLevel;
      // clubUserLevelRatio.textContent = item.dataset.clubUserXpRatio;
      clubXpBarIndicator.classList.add("max-w-" + item.dataset.clubUserXpRatio);
    }

    clubsFocus.append(templateClubsFocus);
  };
}

function displayModalCreateClub() {
  const modalCreateClub = document.querySelector("#modal-clubs-create");

  modalCreateClub?.classList.remove("hidden");
}

function hideModalCreateClub() {
  const modalCreateClub = document.querySelector("#modal-clubs-create");

  modalCreateClub?.classList.add("hidden");
}

function handleNewAvatar(event) {
  const file = event.target.files[0];

  if (file) {
    if (file.size > 2 * 1024 * 1024) {
      alert("Le fichier ne doit pas excéder 2MB !");
      return;
    }

    const reader = new FileReader();
    reader.onload = (element) => {
      avatarPreview.src = element.target.result;
    };
    reader.readAsDataURL(file);
  }
}

async function searchClub() {
  const query = addClubsInput.value;
  const addClubsContent = document.querySelector("#add-clubs-content");
  if (query.length === 0) {
    addClubsContent.replaceChildren();
    return;
  }


  try {
    const response = await fetch(`/api/search/club?q=${query}`);
    const data = await response.json();

    if (!response.ok) {
      const templateAddClubsError = document.querySelector("#template-add-clubs-error").content.cloneNode(true);
      const message = templateAddClubsError.querySelector("span")

      message.textContent = data.error.message;

      addClubsContent.replaceChildren();
      addClubsContent.append(templateAddClubsError);
    }

    const templateAddClubsList = document.querySelector("#template-add-clubs-list").content.cloneNode(true);
    const ul = templateAddClubsList.querySelector("ul");

    for (const club of data) {
      const templateAddClubsItem = document.querySelector("#template-add-clubs-item").content.cloneNode(true);
      const img = templateAddClubsItem.querySelector("img");
      const span = templateAddClubsItem.querySelector("span");

      img.src = club.avatar;
      img.alt = "avatar club";
      span.textContent = club.nom;

      ul.append(templateAddClubsItem);
    }

    addClubsContent.replaceChildren();
    addClubsContent.append(templateAddClubsList);
  } catch (e) {
    const templateAddClubsError = document.querySelector("#template-add-clubs-error").content.cloneNode(true);
    const message = templateAddClubsError.querySelector("span")

    message.textContent = e.message;

    addClubsContent.replaceChildren();
    addClubsContent.append(templateAddClubsError);
  }
}

function searchClubRealTime(event) {
  if (restrictedKeyList.includes(event.code)) {
    return;
  }

  const query = addClubsInput.value;
  const addClubsContent = document.querySelector("#add-clubs-content");
  if (restrictedKeyList.includes(event.code) || query.length === 0) {
    addClubsContent.replaceChildren();
    return;
  }

  const div = document.createElement("div");
  const spinner = document.createElement("img");

  div.classList.add("flex", "justify-center", "items-center", "size-full");
  spinner.src = "/public/img/icon/spinner.svg";
  spinner.alt = "icon spinner";
  spinner.classList.add("animate-spin");
  addClubsContent.replaceChildren();
  div.append(spinner);
  addClubsContent.append(div);

  if (previousSearchId) clearTimeout(previousSearchId);
  previousSearchId = setTimeout(searchClub, 1000);
}

// Clubs focus depuis clubs list
for (const item of clubsList.children) {
  if (!item.classList.contains("ignore-clubs-focus"))
    item.addEventListener("click", displayClubsFocus(item, item.dataset.clubOwnership));
}

buttonsCreateClub?.forEach((button) => button.addEventListener("click", displayModalCreateClub));

modalCancel?.addEventListener("click", hideModalCreateClub);
inputAvatarUpload?.addEventListener("change", handleNewAvatar);
addClubsSearchButton?.addEventListener("click", searchClub);
addClubsInput?.addEventListener("keydown", searchClubRealTime);