import { useGSAP } from "@gsap/react";
import { useRef, type ReactNode } from "react";
import { useGsapContext } from "~/app/_providers/GsapProvicer";
import { SplitText } from "gsap/SplitText";
import gsap from 'gsap'
const AnimateTextIn = ({children,animation="type",position}:{children:ReactNode,animation?:"type"|"slide",position:gsap.Position}) => {
  const el = useRef<HTMLDivElement>(null)
  const gsapContext = useGsapContext();
  useGSAP(() => {
    const rect = el.current?.getBoundingClientRect()
    const isInView = rect && rect.top < window.innerHeight
    const chars = new SplitText(el.current,{type:'chars'})
    gsapContext?.addAnimation(gsap.to(el.current,{opacity:100, duration:0}),0)
    const fromVars = animation === "slide"
      ? {opacity:0, x:-10, duration: 0.2, stagger: {each: 0.08}, ease:'bounce.inOut'}
      : {opacity:0, duration: 0.01, stagger: {each: 0.04}, ease: 'bounce.inOut'}
    if (isInView) {
      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars),position)
    } else {
      gsap.from(chars.chars, { ...fromVars, scrollTrigger: { trigger: el.current, start: 'top 85%', scroller: gsapContext?.getScroller() } })
    }
  }, { dependencies: [] })
  return (
    <div ref={el} className="opacity-0">
      {children}
    </div>
 )
}

export default AnimateTextIn;