import LottieView from 'lottie-react-native';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
} from 'react-native';

export interface CelebrationAnimationRef {
  play: () => void;
}

interface CelebrationAnimationProps {
  visible?: boolean;
}

const CelebrationAnimation = forwardRef<CelebrationAnimationRef, CelebrationAnimationProps>(
  ({ visible = true }, ref) => {
    const animationRef = useRef<LottieView>(null);

    useImperativeHandle(ref, () => ({
      play: () => {
        animationRef.current?.play();
      },
    }));

    if (!visible) return null;

    return (
      <View style={styles.container} pointerEvents="none">
        <LottieView
          ref={animationRef}
          autoPlay={false}
          loop={false}
          source={require('@/assets/lottie/Confetti.json')}
          style={styles.animation}
        />
      </View>
    );
  }
);

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 9999,
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

CelebrationAnimation.displayName = 'CelebrationAnimation';

export default CelebrationAnimation;