// 設定値
const btnWidth = 30;
const btnHeight = 60;
const controlName = ".js-slidemenu-controls";
const menuName = ".js-slidemenu";

// グローバル変数
let menulistElem;
let slideWidth = 0;

/* ========================================================
初期化
=========================================================*/
const initMenu = () => {
  slideWidth = 0;
  for (const element of menulistElem) {
    slideWidth += element.getBoundingClientRect().width;
  }
  document.querySelector(controlName + ' .prev')?.classList.add("-disable");
};

/* ========================================================
ナビの項目の番号取得
=========================================================*/
const getElementRect = (selector) => {
  const controlElem = document.querySelector(selector);
  const originalStyle = controlElem.style.cssText;

  controlElem.style.cssText += 'visibility:hidden;pointer-events:none;';
  const rect = controlElem.getBoundingClientRect();
  let elem = document.elementFromPoint(rect.left + btnWidth / 2, rect.top + btnHeight / 2);
  if (!elem?.matches("a")) {
    elem = elem?.querySelector("a");
  }
  controlElem.style.cssText = originalStyle;

  return Number(elem?.dataset.no ?? 1);
};

/* ========================================================
スクロール制御
=========================================================*/
const updateArrowState = (container) => {
  const prevBtn = document.querySelector(controlName + ' .prev');
  const nextBtn = document.querySelector(controlName + ' .next');
  const maxScroll = slideWidth - window.innerWidth;

  if (container.scrollLeft > btnWidth) {
    prevBtn?.classList.remove("-disable");
  } else {
    prevBtn?.classList.add("-disable");
  }
  if (container.scrollLeft < maxScroll) {
    nextBtn?.classList.remove("-disable");
  } else {
    nextBtn?.classList.add("-disable");
  }
};

/* ========================================================
矢印のクリック処理
=========================================================*/
const handleArrowClick = (isNext) => {
  const container = document.querySelector(menuName);
  const maxNo = container.childElementCount;
  let no = getElementRect(controlName + (isNext ? ' .next' : ' .prev'));

  no = isNext ? Math.min(no + 1, maxNo) : Math.max(no - 1, 1);
  const target = document.querySelector(`${menuName} a[data-no='${no}']`);
  const targetRect = target.getBoundingClientRect();
  const buttonRect = document.querySelector(controlName + (isNext ? ' .next' : ' .prev')).getBoundingClientRect();

  const offset = isNext
    ? container.scrollLeft + targetRect.right - buttonRect.left + window.pageXOffset
    : container.scrollLeft + targetRect.left + window.pageXOffset - 15;

  container.scrollLeft = offset;

  updateArrowState(container);
};

/* ========================================================
ドラッグスクロール対応
=========================================================*/
const mousedragscrollable = (selector) => {
  let target = null;
  const elms = document.querySelectorAll(selector);

  for (const elm of elms) {
    elm.addEventListener('mousedown', (evt) => {
      evt.preventDefault();
      target = elm;
      target.dataset.down = 'true';
      target.dataset.move = 'false';
      target.dataset.x = evt.clientX;
      target.dataset.y = evt.clientY;
      target.dataset.scrollleft = target.scrollLeft;
      target.dataset.scrolltop = target.scrollTop;
      evt.stopPropagation();
    });

    elm.addEventListener('click', (evt) => {
      if (elm.dataset.move === 'true') {
        evt.preventDefault();
        evt.stopPropagation();
      }
    });
  }

  document.addEventListener('mousemove', (evt) => {
    if (target?.dataset.down === 'true') {
      evt.preventDefault();
      const moveX = parseInt(target.dataset.x) - evt.clientX;
      const moveY = parseInt(target.dataset.y) - evt.clientY;
      if (moveX || moveY) {
        target.dataset.move = 'true';
        target.scrollLeft = parseInt(target.dataset.scrollleft) + moveX;
        target.scrollTop = parseInt(target.dataset.scrolltop) + moveY;
        evt.stopPropagation();
      }
    }
  });

  document.addEventListener('mouseup', (evt) => {
    if (target?.dataset.down === 'true') {
      target.dataset.down = 'false';
      evt.stopPropagation();
    }
  });
};

/* ========================================================
初期処理
=========================================================*/
window.addEventListener("DOMContentLoaded", () => {
  menulistElem = document.querySelectorAll(menuName + ' > li > a');
  initMenu();

  const container = document.querySelector(menuName);
  container.addEventListener("scroll", () => updateArrowState(container));

  document.querySelector(controlName + ' .prev')?.addEventListener("click", () => handleArrowClick(false));
  document.querySelector(controlName + ' .next')?.addEventListener("click", () => handleArrowClick(true));

  mousedragscrollable('.js-scroll');
});

window.addEventListener('resize', initMenu);