const catfishPopupDismissedKey = 'catfishPopupDismissedUntil';
const catfishPopupDismissedTtl = 24 * 60 * 60 * 1000;

const isCatfishPopupDismissed = () => {
  const dismissedUntil = Number(localStorage.getItem(catfishPopupDismissedKey));

  if (!dismissedUntil) {
    return false;
  }

  if (Date.now() >= dismissedUntil) {
    localStorage.removeItem(catfishPopupDismissedKey);
    return false;
  }

  return true;
};

const dismissCatfishPopup = () => {
  localStorage.setItem(catfishPopupDismissedKey, String(Date.now() + catfishPopupDismissedTtl));
};

const popup = document.querySelector('.popup');
if (popup && !isCatfishPopupDismissed()) {
  const popupOverlay = document.querySelector('.popup-overlay');
  const popupClose = document.querySelector('.popup-close');

  let scrollLockY = 0;

  const lockScroll = () => {
    scrollLockY = window.scrollY;
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollLockY}px`;
    document.body.style.left = '0';
    document.body.style.right = '0';
    document.body.style.width = '100%';
  };

  const unlockScroll = () => {
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.right = '';
    document.body.style.width = '';
    window.scrollTo(0, scrollLockY);
  };

  const openPopup = () => {
    popup.removeAttribute('style');
    popupOverlay?.removeAttribute('style');
    lockScroll();

    requestAnimationFrame(() => {
      popup.classList.add('active');
      popupOverlay?.classList.add('active');
    });
  };

  const closePopup = () => {
    popup.classList.remove('active');
    popupOverlay?.classList.remove('active');
    unlockScroll();
  };

  setTimeout(() => {
    openPopup();
  }, 7000);

  popupClose?.addEventListener('click', () => {
    dismissCatfishPopup();
    closePopup();
  });
  popupOverlay?.addEventListener('click', closePopup);
  document.addEventListener('keydown', event => {
    if (event.key === 'Escape') {
      closePopup();
    }
  });
}

const catfishBanner = document.querySelector('.catfish-banner');
if (catfishBanner && !isCatfishPopupDismissed()) {
  const catfishBannerClose = catfishBanner.querySelector('.catfish-banner-close');
  let isCatfishBannerClosed = false;

  const updateCatfishBanner = () => {
    if (isCatfishBannerClosed) {
      return;
    }

    catfishBanner.classList.toggle('active', window.scrollY >= window.innerHeight);
  };

  catfishBannerClose?.addEventListener('click', event => {
    event.preventDefault();
    event.stopPropagation();
    dismissCatfishPopup();
    isCatfishBannerClosed = true;
    catfishBanner.classList.remove('active');
  });

  window.addEventListener('scroll', updateCatfishBanner, { passive: true });
  window.addEventListener('resize', updateCatfishBanner);
  updateCatfishBanner();
}

const rlink = document.querySelectorAll('.rlink');

if (rlink) {
  rlink.forEach(link => {
    link.addEventListener('click', () => {
      if (!catfishPopup.referal) {
        return;
      }

      if (!catfishPopup.referal.slug.includes('/')) {
        catfishPopup.referal.slug = '/' + catfishPopup.referal.slug;
      }
      window.location.href =
        catfishPopup.referal.slug +
        '?external_id=' +
        catfishPopup.page +
        '&creative_id=' +  link.dataset.type;
    });
  });
}