const leftButton = document.querySelector(".left-button");
const rightButton = document.querySelector(".right-button");
const carousel = document.querySelector(".blog-carousel");
const root = document.querySelector(":root");

const cardWidth = 210;
console.log("cardWidth:", cardWidth);

let blogArticlesCount = 6 ;
console.log("blogArticlesCount:", blogArticlesCount);

let translationIndex = 0;
let minIndex = (blogArticlesCount - 4) * (-cardWidth);
if (mobileScreen) minIndex = (blogArticlesCount - 1) * (-cardWidth);
const maxIndex = 0;

leftButton.addEventListener("click", () => {
  console.log("translationIndex:", translationIndex);

  if (translationIndex > minIndex) {
    translationIndex -= 210;
    carousel.style.transform = `translateX(${translationIndex}px)`;
  }

  if (translationIndex == minIndex) {
    leftButton.style.background = "var(--carousel-button-deactive-bgcolor)";
    leftButton.style.color = "var(--carousel-button-deactive-color)";
    root.style.setProperty(
      "--left-button-hover-bgcolor",
      "var(--carousel-button-deactive-bgcolor)"
    );
    root.style.setProperty(
      "--left-button-hover-color",
      "var(--carousel-button-deactive-color)"
    );
  } else {
    leftButton.style.background = "var(--carousel-button-active-bgcolor)";
    leftButton.style.color = "var(--carousel-button-active-color)";
    root.style.setProperty(
      "--left-button-hover-bgcolor",
      "var(--carousel-button-active-hover-bgcolor)"
    );
    root.style.setProperty(
      "--left-button-hover-color",
      "var(--carousel-button-active-hover-color)"
    );
  }

  if (translationIndex == maxIndex) {
    rightButton.style.background = "var(--carousel-button-deactive-bgcolor)";
    rightButton.style.color = "var(--carousel-button-deactive-color)";
    root.style.setProperty(
      "--right-button-hover-bgcolor",
      "var(--carousel-button-deactive-bgcolor)"
    );
    root.style.setProperty(
      "--right-button-hover-color",
      "var(--carousel-button-deactive-color)"
    );
  } else {
    rightButton.style.background = "var(--carousel-button-active-bgcolor)";
    rightButton.style.color = "var(--carousel-button-active-color)";
    root.style.setProperty(
      "--right-button-hover-bgcolor",
      "var(--carousel-button-active-hover-bgcolor)"
    );
    root.style.setProperty(
      "--right-button-hover-color",
      "var(--carousel-button-active-hover-color)"
    );
  }
});

rightButton.addEventListener("click", () => {
  console.log("translationIndex:", translationIndex);

  if (translationIndex < maxIndex) {
    translationIndex += 210;
    carousel.style.transform = `translateX(${translationIndex}px)`;
  }

  if (translationIndex == minIndex) {
    leftButton.style.background = "var(--carousel-button-deactive-bgcolor)";
    leftButton.style.color = "var(--carousel-button-deactive-color)";
    root.style.setProperty(
      "--left-button-hover-bgcolor",
      "var(--carousel-button-deactive-bgcolor)"
    );
    root.style.setProperty(
      "--left-button-hover-color",
      "var(--carousel-button-deactive-color)"
    );
  } else {
    leftButton.style.background = "var(--carousel-button-active-bgcolor)";
    leftButton.style.color = "var(--carousel-button-active-color)";
    root.style.setProperty(
      "--left-button-hover-bgcolor",
      "var(--carousel-button-active-hover-bgcolor)"
    );
    root.style.setProperty(
      "--left-button-hover-color",
      "var(--carousel-button-active-hover-color)"
    );
  }

  if (translationIndex == maxIndex) {
    rightButton.style.background = "var(--carousel-button-deactive-bgcolor)";
    rightButton.style.color = "var(--carousel-button-deactive-color)";
    root.style.setProperty(
      "--right-button-hover-bgcolor",
      "var(--carousel-button-deactive-bgcolor)"
    );
    root.style.setProperty(
      "--right-button-hover-color",
      "var(--carousel-button-deactive-color)"
    );
  } else {
    rightButton.style.background = "var(--carousel-button-active-bgcolor)";
    rightButton.style.color = "var(--carousel-button-active-color)";
    root.style.setProperty(
      "--right-button-hover-bgcolor",
      "var(--carousel-button-active-hover-bgcolor)"
    );
    root.style.setProperty(
      "--right-button-hover-color",
      "var(--carousel-button-active-hover-color)"
    );
  }
});
