import { useGSAP } from "@gsap/react";
import { useRef, type HTMLAttributes, type ReactNode } from "react";
import { useGsapContext } from "~/app/_providers/GsapProvicer";
import { SplitText } from "gsap/SplitText";
import gsap from 'gsap'
import { cn } from "~/lib/utils";
const AnimateTextIn = ({
  children,
  animation = "type",
  position,
  className
}: {
  children: ReactNode,
  animation?: "type" | "slide",
  position: gsap.Position,
  className?:HTMLAttributes<HTMLDivElement>['className']
}) => {
  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', onComplete: () => chars.revert() }
      : { opacity: 0, duration: 0.01, stagger: { each: 0.04 }, ease: 'bounce.inOut', onComplete: () => chars.revert()  }
    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={cn(className,"opacity-0")}>
      {children}
    </div>
  )
}

export default AnimateTextIn;