//-- needed elements --
const btnMoveLeft = document.querySelector("#btn-move-left");
const btnMoveRight = document.querySelector("#btn-move-right");
const tablistFrame = document.querySelector(".tablistFrame");
const tablist = document.querySelector("[role=tablist]");
const tabs = document.querySelectorAll("[role=tab]");
const lastTab = tabs[tabs.length - 1];
const firstTab = tabs[0];

let moveRightTargetRect = null;

//-- binds events --
for (const tab of tabs) {
  tab.addEventListener("click", changeActiveTab);
}

// Keydown events for keyboard-accessibility
tablist.addEventListener("keydown", (ev) => {
  switch (ev.key) {
    case "ArrowLeft":
      changeCurrentTabWithKeyboard(ev.target, "previous");
      break;
    case "ArrowRight":
      changeCurrentTabWithKeyboard(ev.target, "next");
      break;
    default:
      break;
  }
});

// scrolling with buttons
btnMoveRight.addEventListener("click", () => {
  const elemsInViewport = document.querySelectorAll("[data-inviewport=true]");
  const a = tablist.getBoundingClientRect();
  const moveTargetElem =
    elemsInViewport[elemsInViewport.length - 1].nextElementSibling;
  const targetRect = moveTargetElem.getBoundingClientRect();
  const newPos = moveTargetElem.offsetLeft + targetRect.width - a.width;
  tablist.scroll({ top: 0, left: newPos, behavior: "smooth" });
});

btnMoveLeft.addEventListener("click", () => {
  const elemsInViewport = document.querySelectorAll("[data-inviewport=true]");
  const a = tablist.getBoundingClientRect();
  const moveTargetElem = elemsInViewport[0].previousElementSibling;
  if (!moveTargetElem) {
    return;
  }

  const targetRect = moveTargetElem.getBoundingClientRect();
  const newPos = moveTargetElem.offsetLeft;
  tablist.scroll({ top: 0, left: newPos, behavior: "smooth" });
});

// observing the positions of those elements
const intersectionObserver = new IntersectionObserver(detectOnEdges, {
  root: tablist,
  threshold: [0.05, 0.97]
});

for (const tabElem of tabs) {
  intersectionObserver.observe(tabElem);
}

// observing whether it needs to show scrollbar or not
const resizeObserver = new ResizeObserver(detectScrollNeeded);
resizeObserver.observe(tablistFrame);

//-- methods --
function detectOnEdges(entries) {
  for (const entry of entries) {
    if (entry.target === firstTab) {
      if (entry.intersectionRatio >= 0.97) {
        disableMoveLeftButton();
      } else {
        enableMoveLeftButton();
      }
    }
    if (entry.target === lastTab) {
      if (entry.intersectionRatio >= 0.97) {
        disableMoveRightButton();
      } else {
        enableMoveRightButton();
      }
    }
    if (entry.isIntersecting) {
      entry.target.setAttribute("data-inviewport", "true");
    } else {
      entry.target.removeAttribute("data-inviewport");
    }
  }
}

function disableMoveLeftButton() {
  tablistFrame.style.setProperty("--display-sahdow-left", "none");
  btnMoveLeft.setAttribute("disabled", "");
}
function enableMoveLeftButton() {
  tablistFrame.style.setProperty("--display-sahdow-left", "block");
  btnMoveLeft.removeAttribute("disabled");
}
function disableMoveRightButton() {
  tablistFrame.style.setProperty("--display-sahdow-right", "none");
  btnMoveRight.setAttribute("disabled", "");
}
function enableMoveRightButton() {
  tablistFrame.style.setProperty("--display-sahdow-right", "block");
  btnMoveRight.removeAttribute("disabled");
}

function detectScrollNeeded(entries) {
  if (entries[0].contentBoxSize[0].inlineSize == tablist.scrollWidth) {
    setButtonsDisplayAttributes("none");
  } else {
    setButtonsDisplayAttributes("block");
  }
}
function setButtonsDisplayAttributes(display) {
  btnMoveLeft.style.display = display;
  btnMoveRight.style.display = display;
}
function changeActiveTabElement(newTarget, oldTarget) {
  const currentPanelId = oldTarget.getAttribute("aria-controls");
  const currentPanel = document.querySelector(`#${currentPanelId}`);
  currentPanel.setAttribute("hidden", "");
  currentPanel.setAttribute("tabindex", "-1");
  oldTarget.removeAttribute("aria-selected");
  oldTarget.setAttribute("tabindex", "-1");

  newTarget.setAttribute("aria-selected", "true");
  newTarget.setAttribute("tabindex", "0");
  const targetPanelId = newTarget.getAttribute("aria-controls");
  const newPanel = document.querySelector(`#${targetPanelId}`);
  newPanel.setAttribute("tabindex", "0");
  newPanel.removeAttribute("hidden");
}
function changeActiveTab(ev) {
  const current = tablist.querySelector("[aria-selected=true]");
  changeActiveTabElement(ev.target, current);
}

function changeCurrentTabWithKeyboard(targetElem, type) {
  const targetIndex = Array.from(tabs).findIndex((elem) => elem === targetElem);
  let newIndex = 0;
  if (type === "next") {
    newIndex = targetIndex + 1;
    if (newIndex >= tabs.length) {
      newIndex = 0;
    }
  } else {
    newIndex = targetIndex - 1;
    if (newIndex < 0) {
      newIndex = tabs.length - 1;
    }
  }
  changeActiveTabElement(tabs[newIndex], tabs[targetIndex]);
  tabs[newIndex].focus();
}