(() => {
   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 = 510; // 스크롤 내렸을 때 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",
      });
   });
})();