import { pan, zoom } from 'pan-zoom';

const storageKey = 'pan-zoom',
  zoomFactor = 0.25;

function restorePanZoomVal(svg) {
  const storedPanZoomVal = localStorage.getItem(storageKey);

  if (storedPanZoomVal) {
    svg.style.transform = storedPanZoomVal;
  }
}

function addEventListeners(svg) {
  svg.addEventListener('wheel', e => zoom(svg, e, zoomFactor), { passive: false });
  svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false });
}

function storePanZoomVal(transformMatrix) {
  localStorage.setItem(storageKey, transformMatrix);
}

function observePanZoomChanges(svg) {
  const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));

  observer.observe(svg, { attributeFilter: ['style'] });
}

export function start(svg) {
  restorePanZoomVal(svg);
  addEventListeners(svg);
  observePanZoomChanges(svg);
}
