import { gsap } from 'gsap';
import { Draggable } from 'gsap/Draggable';
import { InertiaPlugin } from 'gsap/InertiaPlugin';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { debounce } from '../utils';
import Stage from './Stage';
import { preloadImages } from '../utils';

gsap.registerPlugin(Draggable, InertiaPlugin, ScrollTrigger);

const carouselWrapper = document.querySelector('.content');
const stage = new Stage(carouselWrapper);

gsap.ticker.add(stage.render.bind(stage));

function resize() {
  stage.resize();
}

preloadImages().then(() => document.body.classList.remove('loading'));

window.addEventListener('load', resize);
window.addEventListener('resize', debounce(resize));