(() => {
  const { EventManager } = ShopbySkin;

  const designPopup = document.querySelector('design-popup');

  const popupActionMap = {
    CLOSE_DESIGN_POPUP: ({ popupNo }) => {

			if ( document.querySelector('.design-popup--fixed-top') ){
				const div = document.createElement('div');
				div.setAttribute('style', 'width:100%; height:50px; border-top:15px solid #181818; position:sticky; left:0px; top:0px; background:#fff; z-index:11;');
				document.querySelector('.design-popup--fixed-top').insertAdjacentElement('afterend', div);
			}

      EventManager.fire('CLOSE_DESIGN_POPUP', { popupNo });
    },

    NO_VISIBLE_TODAY: ({ popupNo }) => {
      EventManager.fire('NO_VISIBLE_TODAY', { popupNo, shouldHide: true });
    },
  };

  designPopup?.addEventListener('click', ({ target }) => {
    const action = target.closest('[shopby-action]')?.getAttribute('shopby-action');
    const popupNo = target.closest('[shopby-popup-no]')?.getAttribute('shopby-popup-no');

    popupActionMap[action]?.({
      popupNo,
    });
  });
})();