const previousButton = document.querySelector(".previous");
const nextButton = document.querySelector(".next");
const gallery = document.querySelector(".gallery");
const galleryCardsCount = document.querySelectorAll(".card").length;

let currentGalleryX_Offset = 0;
const endGalleryX_Offset = (galleryCardsCount - 1) * -220; // 4 * -220

previousButton.addEventListener("click", galleryClickHandler);
nextButton.addEventListener("click", galleryClickHandler);

function galleryClickHandler(event) {
  let targetButton = event.target.className;
  if (targetButton === "previous" && currentGalleryX_Offset < 0) {
    currentGalleryX_Offset += 220;
  } else if (
    targetButton === "next" &&
    currentGalleryX_Offset > endGalleryX_Offset
  ) {
    currentGalleryX_Offset -= 220;
  }

  if (currentGalleryX_Offset === 0) {
    previousButton.style.opacity = 0.3;
    previousButton.style.cursor = "default";
  } else {
    previousButton.style.opacity = 1;
    previousButton.style.cursor = "pointer";
  }

  if (currentGalleryX_Offset === endGalleryX_Offset) {
    nextButton.style.opacity = 0.3;
    nextButton.style.cursor = "default";
  } else {
    nextButton.style.opacity = 1;
    nextButton.style.cursor = "pointer";
  }
  return gallery.style.transform = `translateX(${currentGalleryX_Offset}px)`;
}