/**
 * ============================================================
 *
 * [content]
 *
 * ============================================================
 */
// import * as azlib from '../global/azlib_light.bundle.js';
/**
 * 汎用JS クラス
 */
class ContentJS {
  constructor() {
    this.isSkip = false;
    this.isFlowAnime = false;
    this.isPopup = false;
    this.isAcc = false;
    this.isOpen = false;
    this.isMmenu = false;
    this.isAllowClose = false;
    this.isDefaultFirst = true;
    this.isScroll = true;
    this.isNoCueOffset = false;
    this.hHeight = 0;
    this.hHeightOrg = 0;
    this.hWidth = 0;
    this.isNavMainHover = [];
    this.isNavSubHover = [];
    this.subHeights = [];
    this.resizeTimer = false;
    this.adminMargin = 0;
    this.scrTopCache = 0;
    this.isNavOpen = false;
  }
  init() {
    this.isSkip = document.body.classList.contains('is-skip') ? true : false;
    this.isFlowAnime = document.body.classList.contains('is-flowAnime') ? true : false;
    this.isPopup = document.body.classList.contains('is-popup') ? true : false;
    this.isAcc = document.body.classList.contains('is-acc') ? true : false;
    this.isNoCueOffset = document.body.classList.contains('is-noCueOffset')
      ? true
      : false;
    this.hHeightOrg = document.getElementById('siteHeader') ? document.getElementById('siteHeader').clientHeight : 0;
    if (util.isiPad) {
      document.documentElement.classList.add('is-ipad');
      if (util.ua.indexOf('macintosh') !== -1) {
        //デスク用webサイトを表示
        document.documentElement.classList.add('is-ipad-desktop');
      }
    }

    window.addEventListener('resize', () => {
      if (this.resizeTimer !== false) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        this.adjust();
        if (util.isChangeMode) {
          if (!util.isRespMode) {
          } else {
          }
        }
      }, 500);
    });
    window.addEventListener('scroll', (e) => {
      if (document.body.classList.contains('is-navOpen')) {
        e.preventDefault();
        return false;
      }
    });
    /* rplSP sp時に画像切り替え*/
    const rplSPImg01 = new azlib.ReplaceImageSP('.rplSPImg', {
      spBreakPoint: util.spBreakPoint,
    });
    /* Popup */
    if (this.isPopup) {
      const popup = new azlib.PopupAdjust('.popupBtItem', {
        onComplete: () => {
          console.log('loaded');
        },
      });
    }
    /* FlowAnime */
    if (this.isFlowAnime) {
      // flowVox
      const flowVox = new azlib.FlowVox('.flowVox', {
        // isRepeat: true,
        // per: 0.25,
        duration: 700,
        // easing: 'easeInOutQuad',
      });
    }
    /* location.hash */
    if (location.hash !== '') {
      const HASH   = location.hash.replace('#', '');
      const TARGET = document.getElementById(HASH);
      const OFFSET = util.isRespMode ? -66 : -100;
      setTimeout(() => {
        new azlib.anime({
          targets: 'html, body',
          scrollTop: TARGET.getBoundingClientRect().top + util.scrTop - (Number(this.hHeight) + 30),
          duration: 0,
          easing: 'easeInQuad',
          complete: anim => {
          }
        });
      }, 500);
    }

    // const acc01 = new azlib.SimpleAccordion();
    this.megaMenu();
    this.accessibility();
    this.table();
    this.initTab();
    this.acc();
    this.addBody();
    this.globalParts();
    this.adjust().then(() => this.runIntro());
  }
  megaMenu() {
    let parent = document.querySelectorAll('.js-mmParentItem'),
        linkItem = document.querySelectorAll('.js-mmParentLink'),
        menu = document.querySelectorAll('.js-mMenu');
    let eventType = window.ontouchstart !== null && 0 < navigator.maxTouchPoints ? 'touchend' : 'click';
      // v.addEventListener(eventType, (e) => {});
    parent.forEach((v, i) => {
      // v.addEventListener('mouseenter', e => {
      //   if (!util.isRespMode && !util.isiPad) {
      //     e.currentTarget.classList.add('is-open');
      //     e.target.querySelector('.js-mMenu').classList.add('is-open');
      //   }
      // });
      // v.addEventListener('mouseleave', e => {
      //   if (!util.isRespMode && !util.isiPad) {
      //     e.currentTarget.classList.remove('is-open');
      //     e.target.querySelector('.js-mMenu').classList.remove('is-open');
      //   }
      // });
      v.querySelectorAll('.js-mmParentLink').forEach((v, i) => {
        v.addEventListener('touchend', (e) => {
          toggleMenu(e);
        });
        v.addEventListener('click', (e) => {
          toggleMenu(e);
        });
        const toggleMenu = (e) => {
          e.preventDefault();
          let el = e.currentTarget.nextElementSibling;
          if (e.currentTarget.classList.contains('is-active')) {
            /** 閉じる */
            e.currentTarget.setAttribute('aria-haspopup', true);
            e.currentTarget.setAttribute('aria-expanded', false);
            el.setAttribute('aria-hidden', true);
            e.currentTarget.classList.remove('is-active');
            el.classList.remove('is-open');
            if (util.isRespMode) {
              el.style.height = null;
            } else {
            }
            this.isMmenu = false;
          } else {
            /** 開く */
            menu.forEach((v, i) => {
              v.classList.remove('is-open');
              v.setAttribute('aria-hidden', true);
              if (util.isRespMode) {
                v.style.height = null;
              }
            });
            linkItem.forEach((v, i) => {
              v.classList.remove('is-active');
              v.setAttribute('aria-haspopup', true);
              v.setAttribute('aria-expanded', false);
            });
            el.classList.add('is-open');
            e.currentTarget.classList.add('is-active');
            e.currentTarget.setAttribute('aria-haspopup', false);
            e.currentTarget.setAttribute('aria-expanded', true);
            el.setAttribute('aria-hidden', false);

            if (util.isRespMode) {
              el.style.height = el.scrollHeight + 'px';
            } else {
            }
            this.isMmenu = true;
          }
        };
      });
    });
    document.addEventListener('keydown', (e) => {
      if (!this.isMmenu) return;
      if(e.key === 'Escape') {
        document.querySelector('.js-mmParentLink.is-active').click();
      }
    });
    document.querySelectorAll('#gNav .js-closeBtn').forEach((v, i) => {
      v.addEventListener('click', (e) => {
        document.querySelector('.js-mmParentLink.is-active').click();
      });
    });
  }
  accessibility() {
    document.querySelectorAll('#gNav a').forEach(link => {
      if (link.href === window.location.href) {
        link.setAttribute('aria-current', 'page')
      }
    });
    if (util.isRespMode) {
      document.getElementById('gNav').setAttribute('aria-hidden', true);
      document.getElementById('gNavOpener').setAttribute('aria-expanded', false);
    }
  }
  addBody() {
    /* viewFooter */
    let options = {
      root: null,
      rootMargin: '0px',
      threshold: 0
    }
    const callback = (entries) => {
      entries.forEach( (entry) => {
        if(entry.isIntersecting) {
          document.body.classList.add('is-viewFooter');
        } else {
          document.body.classList.remove('is-viewFooter');
        }
      });
    }
    const observer = new IntersectionObserver(callback,options);
    observer.observe(document.getElementById('siteFooter'));
    /* scrolled */
    let scrolledClass = () => {
      if (util.scrTop > 200) {
        document.body.classList.add('is-scrolled');
      } else {
        document.body.classList.remove('is-scrolled');
      }
    };
    scrolledClass();
    document.addEventListener('scroll', e => {
      scrolledClass();
    });
  }
  acc() {
    let item = document.querySelectorAll('.accVox');
    item.forEach((v, i) => {
      let btn = v.querySelector('.accOpener');
      let el = v.querySelector('.accContent');
      if (v.classList.contains('is-open')) {
        el.style.height = el.scrollHeight + 'px';
      }
      btn.addEventListener('click', e => {
        e.preventDefault();
        if (e.currentTarget.closest('.accVox').classList.contains('is-open')) {
          // el.style.height = null;
          el.style.height = '0px';
          e.currentTarget.closest('.accVox').classList.remove('is-open');
          setTimeout(() => {
            e.target.closest('.accVox').removeAttribute('open');
          }, 300);
        } else {
          e.target.closest('.accVox').setAttribute('open', 'true');
          el.style.height = el.scrollHeight + 'px';
          e.currentTarget.closest('.accVox').classList.add('is-open');
        }
      });
    });
  }
  table() {
    /* table横スクロール */
    if (util.isRespMode) {
      document.querySelectorAll('.spScrollTable').forEach((v, i) => {
        if (v.querySelector('table').clientWidth > v.clientWidth) {
          v.classList.add('is-scrollX');
          let icoBlock = document.createElement('div');
              icoBlock.classList.add('hint');
          v.appendChild(icoBlock);
        }
      });
    }
    document
      .querySelectorAll('.spScrollTable')
      .forEach((v, i) => {
        v.addEventListener('touchstart', (e) => {
          e.currentTarget.classList.add('touch');
        });
        v.addEventListener('click', (e) => {
          e.currentTarget.classList.add('touch');
        });
      });
  }
  globalParts() {
    const focusLoop = new azlib.FocusLoop('#js-gNav');
    const pagetopBtn = document.querySelector('#js-pageTopVoxCustom .btn');
    const gNavOpener = document.getElementById('gNavOpener');

    /* pagetop */
    pagetopBtn?.addEventListener('click', e => {
      new azlib.anime({
        targets: 'html, body',
        scrollTop: 0,
        duration: 500,
        easing: 'easeInOutQuart',
        complete: (anim) => {
          document.querySelector('#siteHeader .siteLogo a').focus();
        },
      });
    });
    /* hamburger */
    gNavOpener?.addEventListener('click', e => {
      if (this.isNavOpen) {
        e.currentTarget.setAttribute('aria-expanded',false);
        document.getElementById('gNav').setAttribute('aria-hidden',true);
        document.body.classList.remove('is-NavOpen');
        this.isNavOpen = false;
        focusLoop.isRun = false;
      } else {
        e.currentTarget.setAttribute('aria-expanded',true);
        document.getElementById('gNav').setAttribute('aria-hidden',false);
        document.body.classList.add('is-NavOpen');
        this.isNavOpen = true;
        focusLoop.isRun = true;
      }
    });
    // window.addEventListener('scroll', () => {
    //   document.getElementById('siteHeader').style.left = -window.scrollX + 'px';
    // })
    document.querySelectorAll('#gNav a').forEach((v, i) => {
      v.addEventListener('click', (e) => {
        if (this.isNavOpen) document.getElementById('gNavOpener').click();
      });
    });
  }
  initTab() {
    const tabVox = document.querySelectorAll('.js-tabvox');
    let tabFocus = 0;
    tabVox.forEach((v, i) => {
      const button = v.querySelectorAll('.js-tabList button');
      const item = v.querySelectorAll('.js-tabItem');
      button.forEach((v, i, arr) => {
        v.addEventListener('click', e => changeTab(e,i));
        v.addEventListener('focus', e => changeTab(e,i));
      });
      /** キーボード操作によるフォーカス */
      v
        .querySelector('.tabList')
        .addEventListener('keydown', e => {
          if (e.keyCode === 37 || e.keyCode === 39) {
            button[tabFocus].setAttribute('tabindex', -1);
            if (e.keyCode === 37) {
              /** 「←」 */
              tabFocus--;
              if (tabFocus < 0) {
                tabFocus = button.length - 1;
              }
            }
            if (e.keyCode === 39) {
              /** 「→」 */
              tabFocus++;
              if (tabFocus >= button.length) {
                tabFocus = 0;
              }
            }
            button[tabFocus].setAttribute('tabindex', 0);
            button[tabFocus].focus();
          }
        });
      /** */
      const changeTab = (e,i) => {
        if (e.currentTarget.classList.contains('is-active')) return;
        button.forEach((v) => {
          v.classList.remove('is-active');
          v.setAttribute('aria-selected', false);
          v.setAttribute('tabindex', -1);
        });
        item.forEach((v) => {
          v.classList.remove('is-show');
          v.setAttribute('hidden', true);
        });
        tabFocus = i;
        e.currentTarget.setAttribute('tabindex', 0);
        e.currentTarget.classList.add('is-active');
        e.currentTarget.setAttribute('aria-selected', true);
        item[i].classList.add('is-show');
        item[i].removeAttribute('hidden');
      };
    });
    /**タブ 初期表示 パラメーター対応 */
    const searchParams = new URLSearchParams(window.location.search);
    let tabParam = searchParams.get('tab');
    if (tabParam) {
      tabParam = tabParam - 1;
      document.querySelectorAll('.tabList li button')[tabParam].click();
    }
  }
  async adjust() {
    this.hHeight = document.getElementById('siteHeader').clientHeight;
    this.adminMargin = parseInt(getComputedStyle(document.getElementsByTagName('html')[0]).marginTop);
    util.sScroll(
      -(Number(this.adminMargin) + Number(this.hHeight)),
      500,
      'easeInQuad',
      'a[href*="#"].scroll, area[href*="#"].scroll',
      true //初期値
    );

    // this.adjustHeader();

    return 'resolve';
  }
  runIntro() {
    if (this.isSkip) return;

    // document.getElementById('wrapper').style.visibility = 'visible';

    // new azlib.anime({
    //   targets: '#loading',
    //   opacity: [1, 0],
    //   complete: (anim) => {
    //     if (document.getElementById('loading')) {
    //       document.getElementById('loading').style.display = 'none';
    //     }
    //   },
    // });

    new azlib.anime({
      targets: '#wrapper',
      opacity: 1,
      delay: 400,
      duration: 250,
      easing: 'linear',
      complete: (anim) => {
        this.isDefaultFirst = false;
        document.body.classList.add('is-finishedIntro');
      },
    });
  }
}
/**
 * Home用JSクラス
 */
class HomeJS {
  constructor() {
    this.rTimer = false;
    this.isFirst = true;
    this.homeDir = HOME_DIR;
  }
  init() {
    window.addEventListener('resize', () => {
      if (this.rTimer !== false) {
        clearTimeout(Number(this.rTimer));
      }
      this.rTimer = window.setTimeout(() => {
        this.adjust();
        if (util.isChangeMode) {
          this.adjust();
        }
      }, 500);
    });
    this.adjust().then(() => this.runIntro());
  }
  async adjust() {
  }
  runIntro() {
    this.isFirst = false;
    Object.assign(document.getElementById('wrapper').style, {
      visibility: 'visible',
      opacity: 0,
    });
    setTimeout(() => {
      new azlib.anime({
        targets: '#wrapper',
        opacity: [0,1],
        duration: 400,
        easing: 'linear',
        complete: anim => {
          document.body.classList.add('is-view');
        }
      });
    }, 300);
  }
}
/**
 * Anim用JSクラス
 */
class AnimJS {
  constructor() {
  }
  init() {
  }
  initAnim() {
  }
}
/**
 * News用JSクラス
 */
class NewsJS {
  constructor() {
    this.postNum = 2;
    this.postNumAdd = 2;
    this.first = true;
    this.totalPosts = 0;
    this.itemsDisplayed = 1;
    this.existingID = [];
  }
  init() {
  }
}
/**
 * Contact用JSクラス
 */
class ContactJS {
  constructor() {
    this.rTimer = false;
    this.isFirst = true;
    this.errBgColor = 'rgb(249, 205, 209)';
  }
  init() {
    if (document.body.classList.contains('form')) {
      if (document.body.classList.contains('checked')) {
        document.querySelectorAll('.submitItem').forEach((v, i) => {
          v.addEventListener('submit', e => {
            v.querySelectorAll('button').forEach((v, i) => {
              v.disabled = true;
            })
          });
        });
        document
          .getElementById('js-submit').addEventListener('click', (e) => {
            const dir = e.currentTarget.getAttribute('data-dir');
            document.forms[
              'contactForm'
            ].action = `${HOME_DIR}${dir}/thanks#entryForm`;
            document.forms['contactForm'].submit();
          });
        document
          .getElementById('js-back').addEventListener('click', (e) => {
            document.forms['contactForm'].entryPg.value = '';
            document.forms['contactForm'].submit();
          });
      }
      if (document.querySelector('.formSelect')) {
        let item = document.querySelectorAll('.formSelect');
        item.forEach((v, i) => {
          if(v.value != '') {
            v.classList.add('active');
          } else {
            v.classList.remove('active');
          }
          v.addEventListener('change', e => {
            if(e.target.value != '') {
              v.classList.add('active');
            } else {
              v.classList.remove('active');
            }
          });
        });
      }
    }
    // エラー
    if (document.body.classList.contains('error')) {
      const errBgColor = ' rgb(249, 205, 209)';
      document.querySelectorAll('.caution').forEach((v, i) => {
        v.parentNode.style.backgroundColor = errBgColor;
        v.parentNode.classList.add('errorItem');
      });
    }
  }
}
/**
 * インスタンス化
 */
const util = new azlib.Utilities({
  spBreakPoint: 768,
});
const contentJS = new ContentJS();
const homeJS    = new HomeJS();
const animJS    = new AnimJS();
const contactJS = new ContactJS();
const newsJS    = new NewsJS;
/**
 * 実行
 */
document.addEventListener('DOMContentLoaded', () => {
  util.init();
  contentJS.init();
  if (document.body.classList.contains('home')) {
    homeJS.init();
  }
  if (document.body.classList.contains('anim')) {
    animJS.init();
  }
  if (document.body.classList.contains('contact')) {
    contactJS.init();
  }
  if (document.body.classList.contains('news')) {
    newsJS.init();
  }
  const lazyBg = new azlib.LazyLoadBg('.js-lazyBg');
});