import { 
  compute1D, compute2D, computeSpecular, 
  imageDataToURL, createFilterSVG, injectImages, 
  nextFilterId, Spring, PROFILES 
} from '@avenra/liquid-glass';

const lens = document.querySelector('#lens');
const filterId = nextFilterId();
const spring = new Spring(1, 400, 30); // For scale animation

// 1. Setup the Filter
const { svg, refs } = createFilterSVG({
  filterId,
  width: 200,
  height: 200,
  blur: 0.5
});
document.body.appendChild(svg);
lens.style.filter = `url(#${filterId})`;

// 2. Generate Maps
function updateMaps(w, h) {
  const map1D = compute1D(100, 20, PROFILES.convexCircle, 1.5);
  const dispMap = compute2D(w, h, null, 20, 1, map1D);
  const specMap = computeSpecular(w, h, null, 20);
  
  injectImages(refs, imageDataToURL(dispMap), imageDataToURL(specMap));
}

updateMaps(200, 200);

// 3. Interaction & Animation
lens.addEventListener('mousedown', () => spring.setTarget(1.1));
window.addEventListener('mouseup', () => spring.setTarget(1.0));

function animate(time) {
  const scale = spring.update(1/60);
  lens.style.transform = `scale(${scale})`;
  
  // Update filter scale (refraction intensity)
  refs.dispMap.setAttribute('scale', 40 * scale);
  
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);