const { EventManager, utils, constants, actions } = ShopbySkin;
class CustomBottomNav extends ShopbySkin.modules.BottomNav {
  setEvent() {
    super.setEvent();
    const clickEventMap = new Map();

    clickEventMap.set("OPEN_HEADER_SLIDE_MENU", this.handleOpenCanvas);

    this.addEvent({
      eventType: "click",
      eventMap: clickEventMap,
    });
  }
  handleOpenCanvas = () => {
    this.eventManager.fire("TOGGLE_HEADER_SLIDE_MENU", {
      type: "open",
    });
  };
}
customElements.define("custom-bottom-nav", CustomBottomNav);

// 250107 "나의 모의고사" 버튼 클릭 시 alert 창 표시
const myExamButton = document.querySelector(
  ".menu-item .icon_myexam"
).parentElement;
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
  return null;
};
myExamButton.addEventListener("click", (event) => {
  event.preventDefault(); // 기본 동작(링크 이동) 방지

  if (!utils.isSignIn()) {
    const nextUrl = `${location.origin}${constants.PAGE.SIGN_IN}`;
    utils.moveTo({url: `${nextUrl}`});
  } else {
    // memberNo 체크
    const memberNo = getCookie("memberNo");

    if (!memberNo) {
      EventManager.fire("MODAL_ALERT_OPEN", {
        noticeType: "CAUTION",
        message   : "<em>로그인 후 이용할 수 있습니다.</em>",
        onClose   : actions.postSignOut,
      });
    }

    window.location.href = DSDOENV.ApiConfig.EXAM_SYSTEM;
  }
});

const NAV_ICON_MAP = {
  home       : {default: '/assets/images/menu/home_default.svg', active: '/assets/images/menu/home_active.svg'},
  myExam     : {default: '/assets/images/menu/myExam_default.svg', active: '/assets/images/menu/myExam_active.svg'},
  inquiryList: {default: '/assets/images/menu/inquiryList_default.svg', active : '/assets/images/menu/inquiryList_active.svg'},
  shop       : {default: '/assets/images/menu/shop_default.svg', active: '/assets/images/menu/shop_active.svg'},
  specialList: {default: '/assets/images/menu/specialList_default.svg', active : '/assets/images/menu/specialList_active.svg'},
};

const getActiveNavKey = () => {
  const pathname = location.pathname;
  if (pathname.includes('/pages/my/inquiry-list')) return 'inquiryList';
  if (pathname.includes('/pages/product/product-list')) return 'shop';
  if (pathname.includes('/pages/special-list')) return 'specialList';
  if (!pathname.includes('/pages/')) return 'home';
  return null;
};

const activeNavKey = getActiveNavKey();

Object.entries(NAV_ICON_MAP).forEach(([key, { default: defaultSrc, active: activeSrc }]) => {
  const link = document.querySelector(`[data-nav="${key}"]`);
  if (!link) return;
  const img = link.querySelector('.nav-icon');
  if (!img) return;

  const isActive = key === activeNavKey;
  img.src = isActive ? activeSrc : defaultSrc;
  link.classList.toggle('is-active', isActive);
});