'use client';

import React, { useCallback, useEffect, useMemo } from 'react';
import { Animated, Easing, StyleSheet } from 'react-native';

interface AnimatedScreenProps {
  children: React.ReactNode;
  keyIndex: number;
}

const AnimatedScreen: React.FC<AnimatedScreenProps> = ({
  children,
  keyIndex,
}) => {
  const opacityAnim = React.useRef(new Animated.Value(1)).current; // Start with opacity 1
  const slideAnim = React.useRef(new Animated.Value(0)).current; // Start with no slide

  const animationConfig = useMemo(
    () => ({
      duration: 150, // Further reduced
      useNativeDriver: true,
    }),
    [],
  );

  const opacityAnimation = useMemo(
    () =>
      Animated.timing(opacityAnim, {
        toValue: 1,
        duration: 150, // Further reduced
        easing: Easing.out(Easing.ease),
        useNativeDriver: true,
      }),
    [opacityAnim],
  );

  const slideAnimation = useMemo(
    () =>
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 150, // Further reduced
        easing: Easing.out(Easing.ease),
        useNativeDriver: true,
      }),
    [slideAnim],
  );

  const resetAnimations = useCallback(() => {
    opacityAnim.setValue(1); // Start with full opacity
    slideAnim.setValue(0); // Start with no slide
  }, [opacityAnim, slideAnim]);

  const startAnimations = useCallback(() => {
    // Skip animations for better performance
    // Animated.parallel([opacityAnimation, slideAnimation]).start();
  }, [opacityAnimation, slideAnimation]);

  useEffect(() => {
    resetAnimations();
    startAnimations();
  }, [keyIndex, resetAnimations, startAnimations]);

  const animatedStyle = useMemo(
    () => ({
      opacity: 1, // Always full opacity
      transform: [
        { translateX: 0 }, // No slide
      ],
    }),
    [],
  );

  return (
    <Animated.View style={[styles.container, animatedStyle]}>
      {children}
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default AnimatedScreen;