<script setup lang="js">
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";

import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const main = ref(null);
let tl;
let ctx;

function setBoxes() {
  const wrapper = main.value.querySelector(".content-wrapper");
  const rect = wrapper.getBoundingClientRect();

  const boxes = gsap.utils.toArray(".box");

  gsap.set(".title", { y: 200 });

  boxes.forEach((box) => {
    const randomX = gsap.utils.random(0, rect.width);
    const randomY = gsap.utils.random(0, rect.height);

    gsap.set(box, {
      x: randomX,
      y: randomY,
      xPercent: -50,
      yPercent: -50,
    });
  });
}

function toggleTimeline() {
  tl.reversed(!tl.reversed());
}
function startNextAnimation() {
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;
  const radius = 250;

  ctx = gsap.context(() => {
    const boxes = gsap.utils.toArray(".box");
    tl = gsap.timeline({
      scrollTrigger: {
        start: "top top",
        end: "+=100%",
        scrub: true,
        pin: true,
      },
    });

    tl.to(boxes, {
      y: () => gsap.utils.random(-400, -150),
      rotate: () => gsap.utils.random(-180, 180),
      ease: "none",
      stagger: 0.05,
    }).to(
      ".title",
      {
        y: window.innerHeight - 130,
        ease: "power2.out",
        duration: 6.0,
      },
      0,
    );
  }, main.value);
}

onMounted(() => {
  setBoxes();
  startNextAnimation();
});

onUnmounted(() => {
  ctx?.revert();
  // scrollTrigger.getAll().forEach(t => t.kill())
});
</script>
<template>
  <section class="container" ref="main">
    <div class="content-wrapper">
      <h1 class="title">Welcome</h1>
      <div class="box">l</div>
      <div class="box">e</div>
      <div class="box">e</div>
      <div class="box">r</div>
      <div class="box">p</div>
      <div class="box"></div>
      <div class="box">H</div>
      <div class="box">e</div>
      <div class="box">d</div>
      <div class="box">n</div>
      <div class="box">a</div>
      <div class="box">e</div>
      <div class="box">l</div>
      <div class="box">A</div>
      <div class="box">x</div>
      <div class="box">m</div>
      <div class="box">o</div>
      <div class="box">T</div>
      <div class="box">r</div>
      <div class="box">l</div>
      <div class="box">e</div>
      <div class="box">e</div>
      <div class="box">r</div>
      <div class="box">p</div>
      <div class="box"></div>
      <div class="box">H</div>
      <div class="box">e</div>
      <div class="box">d</div>
      <div class="box">n</div>
      <div class="box">a</div>
      <div class="box">e</div>
      <div class="box">l</div>
      <div class="box">A</div>
      <div class="box">x</div>
      <div class="box">m</div>
      <div class="box">o</div>
      <div class="box">T</div>
      <div class="box">r</div>
    </div>
  </section>
</template>

<style scoped>
.container {
  background: radial-gradient(
    129% 99% at 20% 85%,
    rgb(54, 54, 54) 20%,
    rgb(0, 0, 0) 90%
  );
  background-blend-mode: color-dodge;
  min-height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-wrapper {
  position: relative;
  width: 100%;
  height: 80vh;
}

.title {
  position: relative;
  z-index: 1;
  text-align: center;

  font-size: clamp(2rem, 12rem, 5vw);
  margin: 0;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: var(--green);

  line-height: 1.2;
  will-change: transform;
  position: absolute;
}
</style>
