"use strict";

/*-------------------------------------------------------
  グロナビhoverで下層MENUを表示する
-------------------------------------------------------*/
window.addEventListener('load', () => {
  const globalNavi = document.getElementById('global-navi');
  const isTouchDevice = 'ontouchstart' in document.documentElement; // タッチデバイスか否か

  document.querySelectorAll('div.header-navigation-menu-lists-link').forEach(function(element) {

    if (isTouchDevice) {
      // クリックで下層MENUを表示・非表示切り替える（タブレット、SP用）
      element.addEventListener('click', function() {
        let isExpanded = element.getAttribute('aria-expanded')
        let submenu = element.querySelector('.header-navigation-menu-lists-menu');
        if (isExpanded === "true") {
          element.setAttribute('aria-expanded', 'false');
          submenu.classList.add('no-active');
          submenu.setAttribute('aria-hidden', 'true');
          globalNavi.classList.remove('active');
          globalNavi.classList.add('no-active');
        } else {
          element.setAttribute('aria-expanded', 'true');
          submenu.classList.remove('no-active');
          submenu.setAttribute('aria-hidden', 'false');
          globalNavi.classList.add('active');
          globalNavi.classList.remove('no-active');
        }
      });
    } else {
      // hover時に下層MENUを表示する（PC用）
      element.addEventListener('mouseover', function () {

        // 一旦すべてのナビゲーションをOFF状態にする
        const allNavigationItem = document.querySelectorAll('.header-navigation-menu-lists-link');
        const allNavigationSubItem = document.querySelectorAll('.header-navigation-menu-lists-menu');
        allNavigationItem.forEach(elementNavi => {
          elementNavi.setAttribute('aria-expanded', 'false');
        });
        allNavigationSubItem.forEach(elementSub => {
          elementSub.classList.remove('no-active');
          elementSub.setAttribute('aria-hidden', 'true');
        });
 
        let submenu = element.querySelector('.header-navigation-menu-lists-menu');
        if (submenu) {
          element.setAttribute('aria-expanded', 'true');
          submenu.classList.remove('no-active');
          submenu.setAttribute('aria-hidden', 'false');
          globalNavi.classList.add('active');
          globalNavi.classList.remove('no-active');
        }
      });

      // hoverがはずれたら下層MENUを非表示にする（PC用）
      element.addEventListener('mouseout', function () {
        let submenu = element.querySelector('.header-navigation-menu-lists-menu');
        if (submenu) {
          element.setAttribute('aria-expanded', 'false');
          submenu.classList.add('no-active');
          submenu.setAttribute('aria-hidden', 'true');
          globalNavi.classList.remove('active');
          globalNavi.classList.add('no-active');
        }
      });
    }
  });
});

/*-------------------------------------------------------
  SP MENUのクイックアクセス
  クリックするとクイックアクセスリストを非表示
-------------------------------------------------------*/
window.addEventListener('load', () => {
  document.querySelectorAll('.header-navi-sp-quick').forEach(function(element) {
    element.addEventListener('click', function() {
      let isExpanded = element.getAttribute('aria-expanded') 
      let quickList = element.querySelector('.header-navi-sp-quick-list');
      if (isExpanded === "true") {
        element.setAttribute('aria-expanded', 'false');
        quickList.setAttribute('aria-hidden', 'true');
      } else {
        element.setAttribute('aria-expanded', 'true');
        quickList.setAttribute('aria-hidden', 'false');
      }
    });
  });
});


/*-------------------------------------------------------
  もっと見る表示
-------------------------------------------------------*/
// MOREボタンの動作
const moreLinks = document.querySelectorAll(".voices-list-text-more");
moreLinks.forEach((moreLink) => {
  // const contentsID = moreLink.getAttribute('aria-controls');
  // const contentsData = document.getElementById(contentsID);

  // MOREボタンクリック
  moreLink.addEventListener("click",  function() {

    // 隣接する前の要素
    const textElement = moreLink.previousElementSibling;
    if (textElement.classList.contains('clamp')) {
      // 隣接する前の要素の-clampクラスを削除
      textElement.classList.remove('clamp');
      moreLink.classList.add('close');
      moreLink.innerHTML = '閉じる';
    } else {
      // 隣接する前の要素の-clampクラスを付与
      textElement.classList.add('clamp');
      moreLink.classList.remove('close');
      moreLink.innerHTML = 'もっと見る';
    }

  });
});

//------------------------------------------------
// ハンバーガーMENU表示
//------------------------------------------------
// スクロール位置を取得、600px以上スクロールでハンバーガーMENU表示
function getScrollPosition() {
  // スクロールポジション取得
  var scrollPosition = window.scrollY || document.documentElement.scrollTop;
  // 600px以上スクロールで、ハンバーガーMENU表示
  if (scrollPosition > 600) {
    document.getElementById('js-hamburger').classList.add('-display');
    document.getElementById('js-nav-area').classList.add('-float');
  } else {
    document.getElementById('js-hamburger').classList.remove('-display');
    document.getElementById('js-nav-area').classList.remove('-float');
  }
}

// ウィンドウのスクロールイベントリスナー
let hamburgerMenuButtonTimer = null;
function showHamburgerMenuButton() {
  clearTimeout(hamburgerMenuButtonTimer);
  hamburgerMenuButtonTimer = setTimeout(function () {
    getScrollPosition();
  }, 100);
  // 非表示にするクラスを削除（余計なアニメーションを走らせないため）
  let menu = document.querySelector('.header-navigation-menu');
  if (menu) {
    menu.classList.remove('no-active');
  }
  let submenus = document.querySelectorAll('.header-navigation-menu-lists-menu');
  submenus.forEach(submenu => {
    submenu.classList.remove('no-active');
  });
}
document.addEventListener("scroll", showHamburgerMenuButton, { passive: true });


/*-------------------------------------------------------
  ハンバーガーMENUを開く
-------------------------------------------------------*/
// メニュー展開時に背景を固定
const backgroundFix = (bool) => {
  const scrollingElement = () => {
    const browser = window.navigator.userAgent.toLowerCase();
    if ("scrollingElement" in document) return document.scrollingElement;
    return document.documentElement;
  };

  const scrollY = bool
    ? scrollingElement().scrollTop
    : parseInt(document.body.style.top || "0");

  const fixedStyles = {
    height: "100vh",
    position: "fixed",
    top: `${scrollY * -1}px`,
    left: "0",
    width: "100vw"
  };

  Object.keys(fixedStyles).forEach((key) => {
    document.body.style[key] = bool ? fixedStyles[key] : "";
  });

  if (!bool) {
    window.scrollTo(0, scrollY * -1);
  }
};

// 変数定義
const CLASS = "-active";
let flg = false;
let accordionFlg = false;

let hamburger = document.getElementById("js-hamburger");
// let focusTrap = document.getElementById("js-focus-trap");
let menu = document.getElementById("js-nav-area");
// let accordionTrigger = document.querySelectorAll(".js-sp-accordion-trigger");
// let accordion = document.querySelectorAll(".js-sp-accordion");
let menuBackground = document.getElementById('js-menu-background');

// メニュー開閉制御
hamburger.addEventListener("click", (e) => { //ハンバーガーボタンが選択されたら
  hamburger.classList.toggle(CLASS);
  menu.classList.toggle(CLASS);
  if (flg) {// flgの状態で制御内容を切り替え
    // backgroundFix(false);
    hamburger.setAttribute("aria-expanded", "false");
    document.body.classList.remove("fixed");
    hamburger.focus();
    flg = false;
  } else {
    // backgroundFix(true);
    hamburger.setAttribute("aria-expanded", "true");
    document.body.classList.add("fixed");
    flg = true;
    menuBackground.style.display = 'block';
  }
});

// 背景クリックでハンバーガーMENUを閉じる
menuBackground.addEventListener('click', (e) => {
  menuBackground.style.display = 'none';
  menu.classList.remove("-active");
  hamburger.classList.remove("-active");
  hamburger.setAttribute("aria-expanded", "false");
  document.body.classList.remove("fixed");
  flg = false;
});


/*-------------------------------------------------------
  治療院ガイドマップのスクロール
-------------------------------------------------------*/
let container = document.getElementById('js-scrollable-container');
let content = container ? container.querySelector('.js-scrollable-content') : '';
let leftArrow =  container ? container.querySelector('.js-scrollable-left') : '';
let rightArrow =  container ? container.querySelector('.js-scrollable-right') : '';
let scrollTimeout = null;

if(content) {
  content.addEventListener('scroll', () => {
    // 前回のタイマーをクリアして、スクロールが連続している間は処理を遅延させる
    clearTimeout(scrollTimeout);

    // 100ms 後に矢印の表示状態を更新する
    scrollTimeout = setTimeout(() => {
      if (content.scrollLeft <= 0) {
        leftArrow.classList.add('-invisible');
      } else {
        leftArrow.classList.remove('-invisible');
      }
    
      if (content.scrollLeft + content.offsetWidth >= content.scrollWidth) {
        rightArrow.classList.add('-invisible');
      } else {
        rightArrow.classList.remove('-invisible');
      }
    }, 100); // 100ms の遅延を設定
  });
  
  content.dispatchEvent(new Event('scroll'));  
}

/*-------------------------------------------------------
  viewportの書き換え
-------------------------------------------------------*/
!(function () {
  const viewport = document.querySelector('meta[name="viewport"]');
  function switchViewport() {
    const value =
      window.outerWidth < 480 || window.outerWidth > 1024
        ? 'width=device-width,initial-scale=1'
        : 'width=1024';
    if (viewport.getAttribute('content') !== value) {
      viewport.setAttribute('content', value);
    }
  }
  addEventListener('resize', switchViewport, false);
  switchViewport();
})();

/*-------------------------------------------------------
  simple-parallax-js
  https://simpleparallax.com/
-------------------------------------------------------*/
document.addEventListener("DOMContentLoaded", function () {
  const elem = document.querySelector(".js-parallax");
  if (elem !== null) {
    let target = document.getElementsByClassName("js-parallax");
    let parallaxConfig = {
      delay: 0, // スクロール止めてから動く秒数
      orientation: "up", // 動く方向
      scale: 1.6, // 動く大きさ
    };
    const parallax_instance = new simpleParallax(target, parallaxConfig);
  }
});