window.__STYLEGALLERY_ASSETS__={};
gsap.registerPlugin(Flip);
gsap.config({ trialWarn: false });
let container = document.querySelector(".container");
let addButton = document.querySelector("#add-button");
let shuffleButton = document.querySelector("#shuffle-button");
let state;
container.addEventListener("click", (e) => {
  console.log(e.target);
  if (e.target.classList.contains("item")) {
    setState(() => e.target.classList.add("exiting"));
  }
});
function createItem() {
  let item = document.createElement("li");
  item.classList.add("item");
  item.textContent = "Item";
  return item;
}
addButton.addEventListener("click", () => {
  setState(() => container.prepend(createItem()));
});
shuffleButton.addEventListener("click", () => {
  setState(() => {
    gsap.utils.shuffle(gsap.utils.toArray(".item")).forEach((item) => container.append(item));
  });
});
function setState(action) {
  state = Flip.getState(".item, .button");
  action();
  animate();
}
function animate() {
  let exiting = gsap.utils.toArray(".exiting");
  let timeline = Flip.from(state, {
    absolute: true,
    ease: "power1.inOut",
    targets: ".item, .button",
    scale: true,
    simple: true,
    onEnter(elements) {
      return gsap.fromTo(
        elements,
        {
          opacity: 0,
          scale: 0,
          xPercent: -100
        },
        {
          opacity: 1,
          xPercent: 0,
          scale: 1,
          delay: 0.2,
          duration: 0.3
        }
      );
    },
    onLeave(elements) {
      return gsap.to(elements, {
        opacity: 0,
        scale: 0.6,
        rotation: 10,
        yPercent: -5,
        xPercent: 50,
        ease: "expo.out"
      });
    }
  });
  timeline.add(() => removeExited(exiting));
}
function removeExited(exited) {
  gsap.utils.toArray(".item").forEach((item) => {
    if (exited.includes(item)) {
      item.remove();
    }
  });
}