import React, { FC, useEffect, useRef, useState } from "react";
import LottieView from "lottie-react-native";

type Props = {
  progress: number;
};
export const LottieDelayView: FC<Props> = ({ progress }) => {
  const lottieRef = useRef<LottieView>();
  const [progressState, setProgressState] = useState(undefined);
  useEffect(() => {
    if (progress == 0) {
      lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
    } else {
      lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
    }
  }, [progress]);
  return (
    <LottieView
      progress={progressState}
      speed={1.4}
      style={{ width: 80, height: 80 }}
      loop={false}
      source={require("../../assets/939-star.json")}
      ref={lottieRef}
      onAnimationFinish={(isCanceled) => {
        setProgressState(progress);
      }}
    />
  );
};
