// https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010

addEventListener("GSAPReady", (event) => {
  const wrapper = document.querySelector("[data-animate='flip']");
  const toggles = [...wrapper.querySelector("[data-flip='toggle']").children];
  const items = wrapper.querySelector("[data-flip='item']");

  // console.log("flip", wrapper, toggles, items);

  const flipGridList = () => {
    const state = Flip.getState(items.children);
    items.classList.toggle("list");
    
    Flip.from(state, {
      duration: 0.8,
      ease: "expo.out",
      onComplete: () => {   
      	ScrollTrigger.refresh();
       }
    });
  };

  toggles.forEach((toggle, index) => {
    toggle.addEventListener("click", () => {
      toggles[0].classList.toggle("current");
      toggles[1].classList.toggle("current");
      flipGridList();
    });
  });
});