const buttonsOpenCategories = document.getElementsByClassName("open-categories")
const buttonCloseCategory = document.getElementById("close-categories")

function openCategories() {
  const categoriesModal = document.querySelector("#categories-modal")
  categoriesModal.classList.remove("hidden")
}

function closeCategories() {
  const categoriesModal = document.querySelector("#categories-modal")
  categoriesModal.classList.add("hidden")
}


function getCategories() {
  fetch("/get-categories", {
    method: "GET"
  })
    .then(response => response.json())
    .then(data => {
      const categoriesNav = document.getElementById('categories-nav');
      const categoriesList = document.getElementById('categories-list');

      categoriesNav.innerHTML = '';
      categoriesList.innerHTML = '';

      for (const category of data) {
        // NAV
        const li = document.createElement("li")
        li.classList.add("text-xs", "md:text-sm", "font-semibold")

        const a = document.createElement("a")
        a.href = `/categorias/${category.name}`
        a.innerText = category.name

        li.appendChild(a)
        categoriesNav.appendChild(li)


        // MODAL
        const containerDiv = document.createElement('li');

        const link = document.createElement('a');
        link.className = 'relative group block max-w-xs mx-auto md:max-w-none rounded-xl overflow-hidden h-48';
        link.href = `/categorias/${category.name}`;

        const img = document.createElement('img');
        img.className = 'block object-cover w-full h-full rounded-xl border border-gray-200';

        if (category.image) {
          img.src = `/img/categories/${category.image}`;
        } else {
          img.src = "/img/mockups/product-image.png"
        }

        img.alt = category.name;

        link.appendChild(img);

        const textDiv = document.createElement('div');
        textDiv.className = 'relative py-8 text-center';

        const aSpan = document.createElement('a');
        aSpan.className = 'absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block py-1.5 px-3 mr-2 text-xs text-white font-bold bg-gray-800 uppercase rounded-full group-hover:bg-gray-500 transition duration-200';
        aSpan.textContent = 'Conferir';
        aSpan.href = `/categorias/${category.name}`;

        const textSpan = document.createElement('span');
        textSpan.className = 'block text-md font-semibold text-rhino-800 group-hover:text-gray-500 transition duration-200';
        textSpan.textContent = category.name;

        textDiv.appendChild(aSpan);
        textDiv.appendChild(textSpan);

        containerDiv.appendChild(link);
        containerDiv.appendChild(textDiv);

        categoriesList.appendChild(containerDiv)
      }

      try {
        const categorieFooter = document.getElementById('categories-footer');
        categorieFooter.innerHTML = '';

        const generatedNumbers = new Set();

        for (let i = 0; i < 3; i++) {
          let randomNumber;
          do {
            randomNumber = Math.floor(Math.random() * data.length);
          } while (generatedNumbers.has(randomNumber));

          generatedNumbers.add(randomNumber);

          const li = document.createElement("li");

          const a = document.createElement("a");
          a.classList.add("text-gray-50", "underline", "hover:text-gray-100", "transition", "duration-200");
          a.href = `/categorias/${data[randomNumber].name}`;
          a.innerText = data[randomNumber].name;

          li.appendChild(a);
          categorieFooter.appendChild(li);
        }
      } catch (err) { }
    })
    .catch(error => {
      alertMessage("error", "Não foi possível obter as categorias")
      console.log(error)
    });
}


for (const button of buttonsOpenCategories) {
  button.addEventListener("click", openCategories)
}

buttonCloseCategory.addEventListener("click", function () {
  closeCategories()
})

document.addEventListener('DOMContentLoaded', function () {
  getCategories()
})