(() => {
  const containerEl = document.querySelector('[shopby-footer-container]');

  const shortcut = {
    async initialize(commonData) {
      await this.replaceManifestWith(this.generateManifestUrl(commonData));

      this.executeServiceWorker();
    },

    replaceManifestWith(manifestURL) {
      const manifestPlaceholderEl = document.querySelector('[shopby-manifest-placeholder]');
      manifestPlaceholderEl?.setAttribute('href', manifestURL);
    },

    generateManifestUrl(commonData) {
      const mallName = commonData.mallConfig.mall?.mallName;
      const manifest = {
        name: mallName,
        short_name: mallName,
        description: mallName,
        start_url: location.origin,
        display: 'standalone',
        orientation: 'portrait',
        incognito: 'split',
        icons: [
          {
            src: `https:${commonData.bannerConfig?.appIcon}`,
            sizes: '144x144',
            type: 'image/png',
            purpose: 'any',
          },
        ],
      };

      const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
      return URL.createObjectURL(blob);
    },

    executeServiceWorker() {
      this.deferPromptEvent();
      this.registerServiceWorker();
    },

    deferPromptEvent() {
      window.addEventListener('beforeinstallprompt', (event) => {
        event.preventDefault();
        window.deferredPrompt = event;
      });

      window.addEventListener('appinstalled', (event) => {
        event.preventDefault();

        window.deferredPrompt = null;
      });
    },

    registerServiceWorker() {
      try {
        if (!location.href.includes('test-page.html')) {
          return;
        }
        const url = '/serviceWorker.js';
        'serviceWorker' in navigator && navigator.serviceWorker.register(url);
      } catch (e) {
        console.error(e);
      }
    },
  };

  const CLICK_EVENT_HANDLER_MAP = {
    HANDLE_ADD_TO_HOME_BTN_CLICK: async () => {
      const promptEvent = window.deferredPrompt;
      if (!promptEvent) return;

      promptEvent.prompt();
      const { outcome } = await promptEvent.userChoice;
      if (outcome === 'accepted') {
        // eslint-disable-next-line require-atomic-updates
        window.deferredPrompt = null;
        window.close();
      }
    },
  };

  const clickEventListener = (e) => {
    const action = e.target.getAttribute('shopby-action');

    CLICK_EVENT_HANDLER_MAP[action]?.(e);
  };

  containerEl?.addEventListener('click', clickEventListener);

  /* 240523 서주원 : 슬라이드토글 효과 */
  (function () {
    // slideUp 함수
    function slideUp(element, duration = 400) {
      if (element.dataset.isAnimating === "true") return;
      element.dataset.isAnimating = "true";

      element.style.transitionProperty = 'height, margin, padding';
      element.style.transitionDuration = duration + 'ms';
      element.style.boxSizing = 'border-box';
      element.style.height = element.offsetHeight + 'px';
      element.offsetHeight; // 강제 리플로우
      element.style.overflow = 'hidden';
      element.style.height = 0;
      element.style.paddingTop = 0;
      element.style.paddingBottom = 0;
      element.style.marginTop = 0;
      element.style.marginBottom = 0;

      window.setTimeout(function () {
        element.style.display = 'none';
        element.style.removeProperty('height');
        element.style.removeProperty('padding-top');
        element.style.removeProperty('padding-bottom');
        element.style.removeProperty('margin-top');
        element.style.removeProperty('margin-bottom');
        element.style.removeProperty('overflow');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
        element.dataset.isAnimating = "false";
      }, duration);
    }

    // slideDown 함수
    function slideDown(element, duration = 400) {
      if (element.dataset.isAnimating === "true") return;
      element.dataset.isAnimating = "true";

      element.style.removeProperty('display');
      let display = window.getComputedStyle(element).display;
      if (display === 'none') display = 'block';
      element.style.display = display;

      let height = element.offsetHeight;
      element.style.overflow = 'hidden';
      element.style.height = 0;
      element.style.paddingTop = 0;
      element.style.paddingBottom = 0;
      element.style.marginTop = 0;
      element.style.marginBottom = 0;
      element.offsetHeight; // 강제 리플로우
      element.style.boxSizing = 'border-box';
      element.style.transitionProperty = 'height, margin, padding';
      element.style.transitionDuration = duration + 'ms';
      element.style.height = height + 'px';
      element.style.removeProperty('padding-top');
      element.style.removeProperty('padding-bottom');
      element.style.removeProperty('margin-top');
      element.style.removeProperty('margin-bottom');

      window.setTimeout(function () {
        element.style.removeProperty('height');
        element.style.removeProperty('overflow');
        element.style.removeProperty('transition-duration');
        element.style.removeProperty('transition-property');
        element.dataset.isAnimating = "false";
      }, duration);
    }

    // slideToggle 함수
    function slideToggle(element, duration = 400, button = null) {
      if (element.dataset.isAnimating === "true") return;
      if (window.getComputedStyle(element).display === 'none') {
        slideDown(element, duration);
        if (button) button.classList.add('active');
      } else {
        slideUp(element, duration);
        if (button) button.classList.remove('active');
      }
    }

    // 전역으로 함수 등록
    window.slideUp = slideUp;
    window.slideDown = slideDown;
    window.slideToggle = slideToggle;
  })();


  /* 240523 서주원 : 슬라이드토글 효과 사용 */
  document.querySelectorAll('.toggleSlideButton').forEach((btn, index) => {
    btn.addEventListener('click', function () {
      const content = document.querySelectorAll('.toggleSlideContent')[index];
      slideToggle(content, 400, btn);
    });
  });


  /* fixed */
  // 스크롤과 페이지 로드 시 실행될 함수를 정의
  function adjustSideBtnsPosition() {
    var windowHeight = window.innerHeight; // 창의 높이
    var scrollPosition = window.scrollY || window.pageYOffset; // 현재 스크롤 위치
    var sideBtnsOriginalBottom = 90; // .side_btns 원래 bottom 위치
    var bottomLimit = 300; // 스크롤 내렸을 때 bottom 위치

    var sideBtns = document.querySelector('.foot_fixed_box');
    var sideBtnsHeight = sideBtns.offsetHeight; // .side_btns의 높이
    var documentHeight = document.documentElement.scrollHeight; // 문서 전체 높이

    // 스크롤 위치에 따라 .side_btns의 위치를 조정
    if (documentHeight - windowHeight - scrollPosition <= bottomLimit) {
      // 스크롤이 아래쪽에 도달했을 때
      var translateY = bottomLimit - (documentHeight - windowHeight - scrollPosition) - sideBtnsOriginalBottom;
      sideBtns.style.transform = 'translateY(-' + translateY + 'px)';
      sideBtns.style.bottom = sideBtnsOriginalBottom + 'px';
    } else {
      // 스크롤이 아래쪽에 도달하지 않았을 때
      sideBtns.style.transform = 'translateY(0)';
      sideBtns.style.bottom = sideBtnsOriginalBottom + 'px';
    }
  }
  // 스크롤 이벤트 리스너 추가
  window.addEventListener('scroll', adjustSideBtnsPosition);
  // 페이지 로드 시 함수 실행
  document.addEventListener('DOMContentLoaded', adjustSideBtnsPosition);


  /* go down */
  var btnGoBottom = document.getElementById("goBottom");
  btnGoBottom.addEventListener("click", function () {
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth'
    });
  });

})();