// 375px未満の対応
!(function () {
  const viewport = document.querySelector('meta[name="viewport"]');
  function switchViewport() {
    const value =
      window.outerWidth > 380
        ? 'width=device-width,initial-scale=1'
        : 'width=380';
    if (viewport.getAttribute('content') !== value) {
      viewport.setAttribute('content', value);
    }
  }
  addEventListener('resize', switchViewport, false);
  switchViewport();
})();

// リサイズ処理
$(window).on('load resize', function () {
  getWindowSize();
  setHeaderSpace();
  setMv();
});

// Gnavモーダル設定
window.addEventListener('load', () => {
  const anchorLinks = document.querySelectorAll('#gnav-modal a[href^="#"]');
  const anchorLinksArr = Array.prototype.slice.call(anchorLinks);
  const btn = document.querySelector('#js-nav');
  const modalBg = document.querySelector('.modal-bg');
  const clickEventType = window.ontouchstart !== null ? 'click' : 'touchend';
  getHeaderHeight();

  // ページ内リンクスムーススクロール
  anchorLinksArr.forEach((link) => {
    link.addEventListener(clickEventType, (e) => {
      e.preventDefault();
      const targetId = link.hash;
      const targetElement = document.querySelector(targetId);
      const targetoffsetTop =
        window.pageYOffset + targetElement.getBoundingClientRect().top;
      if (btn.ariaExpanded == 'true') {
        btn.ariaExpanded = false;
      }
      // micromodalによるclose
      anchorLinksArr.ariaExpanded = false;
      MicroModal.close('gnav-modal');
      $('.gnav-btn').removeClass('is-show');
      window.scrollTo({
        top: targetoffsetTop - hH,
        behavior: 'smooth',
      });
    });
  });

  // メニューの開閉
  btn.addEventListener(clickEventType, function () {
    if (btn.ariaExpanded == 'false') {
      btn.ariaExpanded = true;
      MicroModal.show('gnav-modal', {
        disableScroll: true,
        disableFocus: true,
        awaitOpenAnimation: true,
        awaitCloseAnimation: true,
      });
      $('.gnav-btn').addClass('is-show');
      $('.gnav__modal').attr('aria-hidden', 'false');
    } else {
      btn.ariaExpanded = false;
      MicroModal.close('gnav-modal');
      $('.gnav-btn').removeClass('is-show');
      $('.gnav__modal').attr('aria-hidden', 'true');
    }
    // 複数クリック対策
    setTimeout(function () {
      if (
        $('.gnav-btn').hasClass('is-show') &&
        !$('.gnav__modal').hasClass('is-open')
      ) {
        $('.gnav__modal').addClass('is-open');
      }
    }, 400);
  });

  // ESC対応
  document.body.addEventListener('keyup', (event) => {
    if (event.code === 'Escape') {
      btn.ariaExpanded = false;
      $('.gnav-btn').removeClass('is-show');
      $('.gnav__modal').attr('aria-hidden', 'true');
    }
  });

  // 背景クリック対応
  modalBg.addEventListener(clickEventType, function () {
    btn.ariaExpanded = false;
    $('.gnav-btn').removeClass('is-show');
    $('.gnav__modal').attr('aria-hidden', 'true');
  });
  $('.gnav__modal-content').on(clickEventType, function (event) {
    event.stopPropagation();
  });
});

// 検索モーダル設定
window.addEventListener('load', () => {
  const searchBtn = document.querySelectorAll('.c-search-btn');
  const searchModalBg = document.querySelector('.search-modal__bg');
  const searchClickEventType =
    window.ontouchstart !== null ? 'click' : 'touchend';
  getHeaderHeight();

  // メニューの開閉
  for (let i in searchBtn) {
    if (searchBtn.hasOwnProperty(i)) {
      searchBtn[i].addEventListener(searchClickEventType, function () {
        if (searchBtn[i].ariaExpanded == 'false') {
          searchBtn[i].ariaExpanded = true;
          MicroModal.show('search-modal', {
            disableScroll: true,
            disableFocus: true,
            awaitOpenAnimation: true,
            awaitCloseAnimation: true,
          });
          $('.c-search-btn').addClass('is-show');
          $('.search-modal').attr('aria-hidden', 'false');
        } else {
          searchBtn[i].ariaExpanded = false;
          MicroModal.close('search-modal');
          $('.c-search-btn').removeClass('is-show');
          $('.search-modal').attr('aria-hidden', 'true');
        }
        // 複数クリック対策
        setTimeout(function () {
          if (
            $('.c-search-btn').hasClass('is-show') &&
            !$('.search-modal').hasClass('is-open')
          ) {
            $('.search-modal').addClass('is-open');
          }
        }, 400);
      });
      // ESC対応
      document.body.addEventListener('keyup', (event) => {
        if (event.code === 'Escape') {
          searchBtn[i].ariaExpanded = false;
          $('.c-search-btn').removeClass('is-show');
          $('.search-modal').attr('aria-hidden', 'true');
        }
      });

      // 背景クリック対応
      searchModalBg.addEventListener(searchClickEventType, function () {
        searchBtn[i].ariaExpanded = false;
        $('.c-search-btn').removeClass('is-show');
        $('.search-modal').attr('aria-hidden', 'true');
      });
      $('.search-modal__content').on(searchClickEventType, function (event) {
        event.stopPropagation();
      });
    }
  }
});

// ++++++++++++++++++++++++++++++++++
// 関数定義
// ++++++++++++++++++++++++++++++++++

// スクロール位置取得
function getScrollPosition() {
  scrollPosition = $(window).scrollTop();
}

// ヘッダーの高さを取得
function getHeaderHeight() {
  hH = $('header').innerHeight();
}

// 画面幅・画面高さ取得
function getWindowSize() {
  wW = $(window).innerWidth();
  wH = $(window).innerHeight();
}

// ヘッダーfixed分余白設定
function setHeaderSpace() {
  getWindowSize();
  getHeaderHeight();
  $('main').css('padding-top', hH + 'px');
}

// メインビジュアル
function setMv() {
  getWindowSize();
  getHeaderHeight();
  if ($('.f-mv-v2').length) {
    const fixHeaderHeight = $('header').innerHeight();
    if (wW > 640) {
      $('.f-mv-v2').css('height', wH - fixHeaderHeight + 'px');
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // TOPのバナースライダーが存在していたら実行
  if (document.querySelector('.c-index-banner-slider')) {
    const slides = document.querySelectorAll(
      '.c-index-banner-slider .swiper-slide'
    );
    const swiperIndexBanner = new Swiper('.c-index-banner-slider', {
      loop: slides.length > 2,
      slidesPerView: 1.05,
      spaceBetween: 10,
      centeredSlides: true,
      speed: 1000,
      navigation: {
        nextEl: slides.length > 1 ? '.swiper-index-banner-next' : 'none',
        prevEl: slides.length > 1 ? '.swiper-index-banner-prev' : 'none',
      },
      breakpoints: {
        768: {
          slidesPerView: 1.5,
          spaceBetween: 20,
        },
        1024: {
          slidesPerView: 3,
        },
      },
    });

    // スライドが1枚の場合、ナビゲーションボタンを非表示にする
    if (slides.length <= 1) {
      document.querySelector('.swiper-index-banner-next').style.display =
        'none';
      document.querySelector('.swiper-index-banner-prev').style.display =
        'none';
    }
  }
});