// Metro module 8778 (f8779).
import { useRef, useState, useMemo, useCallback, useEffect } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { AnimationState } from "../../PremiumGiftingUtils";
import { getGiftAnimationData, getLottieType, LottieType } from "../utils/GiftAnimationData";
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
const useStyles = createStyles({
  container: {
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "center",
    flexDirection: "row"
  },
  consistentHeight: {
    height: 300
  },
  animation: {
    maxWidth: 375,
    width: "100%",
    height: "auto"
  },
  baseAnimation: {
    position: "absolute",
    bottom: 0
  },
  lottie: {
    height: 275
  }
});
export default function PremiumGiftBackgroundAnimation(props) {
  let ref, ref2, state, setState, state2, setState2, state3, setState3, state4, setState4;
  const giftStyle = props.giftStyle;
  let withConsistentHeight = props.withConsistentHeight;
  ref = void 0;
  ref2 = void 0;
  state = void 0;
  setState = void 0;
  state2 = void 0;
  setState2 = void 0;
  state3 = void 0;
  setState3 = void 0;
  state4 = void 0;
  setState4 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  ref = useRef(null);
  ref2 = useRef(null);
  [state, setState] = useState(AnimationState.ACTION);
  [state2, setState2] = useState(void 0);
  [state3, setState3] = useState(void 0);
  [state4, setState4] = useState(false);
  const memo = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.ACTION), [giftStyle]);
  const memo2 = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.LOOP), [giftStyle]);
  const lottieType = getLottieType(giftStyle);
  useMemo(() => {
    if (state2 !== giftStyle) {
      setState2(giftStyle);
      setState4(state !== AnimationState.LOOP && state3 != null);
      setState(AnimationState.ACTION);
    }
  }, [state3, state2, giftStyle, state]);
  const callback = useCallback((a0) => {
    if (state4) {
      setState4(false);
    } else if (!(state === AnimationState.LOOP || a0)) {
      setState3(AnimationState.ACTION);
      setState(AnimationState.LOOP);
    }
  }, [state, state4]);
  useEffect(() => {
    if (state === AnimationState.LOOP) {
      const current2 = ref.current;
      if (current2 != null) {
        current2.reset();
      }
    } else {
      const current = ref2.current;
      if (current != null) {
        current.reset();
      }
    }
  }, [state]);
  useEffect(() => {
    if (stateFromStores) {
      const current = ref.current;
      if (current != null) {
        current.reset();
      }
    }
  }, [stateFromStores]);
  const style = [styles.container, ,];
  if (withConsistentHeight) {
    withConsistentHeight = styles.consistentHeight;
  }
  style[1] = withConsistentHeight;
  const style2 = [styles.baseAnimation, styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, ,];
  const r98 = state2 === giftStyle;
  style2[3] = {
    opacity: r98 ? state !== AnimationState.LOOP ? 1 : 0 : 0
  };
  return <View style={style}>
    <LottieAnimationView style={style2} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref} source={memo} autoPlay={!stateFromStores} onAnimationFinish={callback} loop={false} />
    <LottieAnimationView style={[styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, {
      opacity: r98 ? state === AnimationState.LOOP ? 1 : 0 : 0
    }]} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref2} source={memo2} autoPlay={stateFromStores ? !stateFromStores : state === AnimationState.LOOP} loop />
  </View>;
};