/* eslint-disable */
// @ts-ignore

import { useEffect, useRef } from "react";
import Lottie, { LottieRefCurrentProps } from "lottie-react";

import * as animationData from "@/assets/lottie/Valentine_Script Writing_V2.json";
//import Valentine from "@/assets/svg/valentine.svg";
import Object3dBounds from "@/components/quiz-section/object3d-bounds";
import { useStore } from "@/store";

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

import { cubicBezier, m } from "framer-motion";

const SplashSection = ({
  text,
  setButtonState,
}: {
  text: string;
  setButtonState: (state: boolean) => void;
}) => {
  const isReady = useStore.use.isReady();
  const step = useStore.use.step();
  const progress = useStore.use.progress();

  const lottieRef = useRef<LottieRefCurrentProps>(null);

  useEffect(() => {
    setTimeout(() => {
      lottieRef.current?.play();
      setButtonState(true);
    }, 2000);
  }, [isReady]);

  return (
    <div className={styles.section}>
      <Object3dBounds />
      <m.h1
        initial={{ y: 200, opacity: 0 }}
        animate={{ y: progress >= 1 ? 0 : 200, opacity: 1 }}
        transition={{
          type: "spring",
          damping: 15,
          stiffness: 70,
          delay: 0.23,
        }}
        aria-label={`${text} Valentine`}
        aria-hidden={step !== 0 || undefined}
      >
        <span aria-hidden>{text}</span>
        <Lottie
          lottieRef={lottieRef}
          animationData={animationData}
          loop={false}
          autoplay={false}
        />
      </m.h1>
    </div>
  );
};

export default SplashSection;