/* eslint-disable camelcase */
(() => {
  const { EventManager } = ShopbySkin;

  function showFooterNotice() {
      

     //공지사항 슬라이더
      const list = document.querySelector('.notice-list');
      let notices = document.querySelectorAll('.notice-list li');
      let noticeHeight = 35;
      let index = 0;
      let isHover = false;

      // 첫번째 공지를 맨 뒤에 복제해서 자연스럽게 연결
      list.appendChild(notices[0].cloneNode(true));

      function rollNotice() {
        if (isHover) return;

        index++;
        list.style.transition = "0.8s";
        list.style.transform = `translateY(-${noticeHeight * index}px)`;

        // 마지막 복제 공지까지 올라가면 transition 제거 후 초기화
        if (index === notices.length) {
          setTimeout(() => {
            list.style.transition = "0s";
            list.style.transform = "translateY(0)";
            index = 0;
          }, 800);
        }
      }

      setInterval(rollNotice, 3000);

      // hover 멈춤 처리
      const container = document.querySelector('.notice-container');
      container.addEventListener('mouseenter', () => isHover = true);
      container.addEventListener('mouseleave', () => isHover = false);
  }

  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();
    },

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

        window.deferredPrompt = event;
      });

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

        window.deferredPrompt = null;
      });
    },
  };

  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);

  EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => {
    ShopbySkin.actions.fetchBoardPosts({"page":1,"pageSize":10,"direction":"DESC","boardNoOrId":"notice"});

    EventManager.on('QUERY_BOARDS_POSTS', (data) => {
      for( const item of data.items ) {
        const title   = item.title;
        const boardNo = item.boardNo;
        const postNo  = item.postNo;
        // const regDate = item.registerYmdt.substring(0, 10).replace(/-/gi, '.')
        const href    = `/pages/board/post-detail.html?boardNo=${boardNo}&articleNo=${postNo}`;
        const html    = `
          <li class="">
            <div>
              <a href="${href}">
                <p>${title}</p>
              </a>
            </div>
          </li>`;

        document.querySelector('.notice-list').innerHTML += html;
      }

      showFooterNotice();
    });

    //패밀리사이트
    const wrap = document.querySelector('.select-wrap');
    const trigger = wrap.querySelector('.select-trigger');
    const optionBox = wrap.querySelector('.select-options');
    const realSelect = wrap.querySelector('.real-select');

    trigger.addEventListener('click', () => {
      trigger.classList.toggle('white');
      optionBox.classList.toggle('open');
    });

    // 외부 클릭 닫기
    document.addEventListener('click', (e) => {
      if(!wrap.contains(e.target)) {
        trigger.classList.remove('white');
        optionBox.classList.remove('open');
      }
    });

  });
})();