window.addEventListener('scroll', checkPosition)
window.addEventListener('resize', checkPosition)

// Select the element you want to watch
const elementReference = document.querySelector('.watch-me');
const elementSticky = document.querySelector('.stick-me');

const qrTimeCustom = document.getElementById('qr-time-custom');
const qrTimeCustomFormatted = document.getElementById('qr-time-number-custom');
const qrTimeLeftServerValueContainer = document.getElementById('server-value-timeleft');
let timeLeftServerValue = qrTimeLeftServerValueContainer.value


const qrTimeLabelMinutes = document.getElementById('qr-time-label-minutes');
const qrTimeLabelSeconds = document.getElementById('qr-time-label-seconds');

let QRCODE_BOX_HEIGHT = 322;
let waitTime = 5 * 60;

if (timeLeftServerValue !== null) {
  waitTime = timeLeftServerValue
}

let timeUntilExtendBtn = waitTime - 30;

// Set height for without extend button
elementReference.style.height = `${QRCODE_BOX_HEIGHT}px`;
elementSticky.style.height = `${QRCODE_BOX_HEIGHT}px`;

// Timer until extend button appears
const timer = setInterval(() => {
  timeUntilExtendBtn--;
  waitTime--;
  qrTimeCustom.value = waitTime
  
  let timeLeftNumber;
  if (waitTime >= 60) {
    timeLeftNumber = Math.floor(waitTime / 60);
  } else if (waitTime > 0) {
    timeLeftNumber = waitTime;
  }
  qrTimeCustomFormatted.innerText = timeLeftNumber || 0;


  if (waitTime < 60) {
    qrTimeLabelMinutes.classList.add("hide")
    qrTimeLabelSeconds.classList.remove("hide")
  }
  if (waitTime < 0) {
    clearInterval(timer);
  }
  if (timeUntilExtendBtn <= 0) {
    QRCODE_BOX_HEIGHT = 380;
    document.getElementById("extend-bankid-btn").classList.remove("hide")
    // Set height for with extend button
    elementReference.style.height = `${QRCODE_BOX_HEIGHT}px`;
    elementSticky.style.height = `${QRCODE_BOX_HEIGHT}px`;
  }
}, 1000);

function checkPosition() {
  if (document.fullscreenElement) return;

  const rect = elementReference?.getBoundingClientRect();

  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // Clear classes
  elementSticky.classList.remove('stick-top', 'stick-bottom', 'fixed-element')

  const QRCodeCutByBottom = rect.bottom > viewportHeight

  if (QRCodeCutByBottom) {
    elementSticky.classList.add('fixed-element', 'stick-bottom')
  }

  const QRCodeCutByTop = rect.top < 0
  const QRCodeCompletelyBelowView = rect.top < 0 && rect.bottom < 0
  const QRCodeDontFitOnZoomLevel = (viewportHeight - QRCODE_BOX_HEIGHT) < 0
  if (QRCodeCutByTop || QRCodeCompletelyBelowView || QRCodeDontFitOnZoomLevel) {
    elementSticky.classList.add('fixed-element', 'stick-top')
  }
};