(() => {
  const { EventManager, utils } = 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);
  }

  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>
              <span class="date">${regDate}</span>
            </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');
      }
    });
  });
})();