import { useEffect, useRef, useState } from "react";
import clsx from "clsx";
import { m, useAnimationControls, useTime, useTransform } from "framer-motion";
import { useRouter } from "next/router";

import { useWindowSize } from "@/hooks";

import styles from "./styles.module.scss";

const Ticker = ({
  text,
  index,
}: {
  text: string;
  index: number | undefined;
}) => {
  const windowSize = useWindowSize();
  const titleRef = useRef<HTMLHeadingElement>(null);
  const controlsX = useAnimationControls();

  const [width, setWidth] = useState<number>(0);
  const [isTicker, setIsTicker] = useState<boolean>(false);

  useEffect(() => {
    setTimeout(() => {
      setWidth((titleRef.current as any).offsetWidth);
      setIsTicker(
        windowSize.width - 60 < (titleRef.current as any).offsetWidth,
      );
    }, 500); // For start after the animation
  }, [titleRef, index, windowSize, setWidth, setIsTicker]);

  useEffect(() => {
    controlsX.stop();

    if (isTicker) {
      controlsX.start({
        x: [0, width * -1],
        transition: {
          ease: "linear",
          repeat: Infinity,
          duration: width / 60,
          delay: 0.5,
        },
      });
    } else {
      controlsX.set({ x: 0 });
    }
  }, [isTicker, width, index, titleRef, controlsX]);

  return (
    <div
      className={clsx(styles.wrapper, {
        [styles.ticker]: isTicker,
      })}
    >
      <m.h3 className={styles.songTitle} animate={controlsX} aria-label={text}>
        <span ref={titleRef} aria-hidden>
          {text}
        </span>
        <span aria-hidden>{text}</span>
      </m.h3>
    </div>
  );
};

export default Ticker;