const THUMB_MIN = 150;
const THUMB_MAX = 400;

let _thumbSizeHint;
let thumbSize = 250;
let thumbHintTimer = null;

export function init({ gridContainer, thumbSizeHint }) {
  _thumbSizeHint = thumbSizeHint;

  gridContainer.addEventListener('wheel', (e) => {
    if (!e.ctrlKey) return;
    e.preventDefault();
    setThumbSize(thumbSize + (-e.deltaY * 0.8));
  }, { passive: false });
}

export function setThumbSize(size) {
  thumbSize = Math.round(Math.max(THUMB_MIN, Math.min(THUMB_MAX, size)));
  document.documentElement.style.setProperty('--thumb-size', thumbSize + 'px');
  _showHint(thumbSize);
}

function _showHint(size) {
  _thumbSizeHint.textContent = `${size}px`;
  _thumbSizeHint.classList.add('show');
  clearTimeout(thumbHintTimer);
  thumbHintTimer = setTimeout(() => _thumbSizeHint.classList.remove('show'), 1000);
}