import React, { useRef, useEffect } from 'react'; // Necesitamos useRef y useEffect
import { Animated, Easing, StyleSheet } from 'react-native'; // Importamos Animated
import { SkeletonProps } from './types';
import useTheme from '../../context/theme/useTheme';
import createSxStyle from '../../lib/sx';

export const Skeleton: React.FC<SkeletonProps> = ({
  width = '100%',
  height = 20,
  borderRadius = 4,
  containerStyle, // No usado en este ejemplo, pero lo mantengo si lo usas en otro lado
  children, // No usado en este ejemplo, pero lo mantengo
  animationDuration = 5000,
  isLoading = true, // Lógica de isLoading típicamente se maneja en el padre
  baseColor, // Se puede usar para configurar el color base
  highlightColor, // Se puede usar para configurar el color del brillo
  style,
  ...rest
}) => {
  const theme = useTheme();

  // 1. Usamos useRef para mantener la referencia a Animated.Value
  const animatedValue = useRef(new Animated.Value(0)).current;

  // 2. Definimos la animación de la opacidad
  const startAnimation = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animatedValue, {
          toValue: 1,
          duration: animationDuration / 2, // Mitad de la duración para subir la opacidad
          easing: Easing.linear,
          useNativeDriver: true, // Siempre usa useNativeDriver para mejor rendimiento
        }),
        Animated.timing(animatedValue, {
          toValue: 0,
          duration: animationDuration / 2, // Mitad de la duración para bajar la opacidad
          easing: Easing.linear,
          useNativeDriver: true,
        }),
      ])
    ).start();
  };

  // 3. Iniciamos la animación al montar el componente
  useEffect(() => {
    startAnimation();
  }, []); // El array de dependencias vacío asegura que se ejecute solo una vez al montar

  // 4. Interpolamos el valor para obtener la opacidad deseada
  const opacity = animatedValue.interpolate({
    inputRange: [0, 0.5, 1], // De 0 a 1, pasando por 0.5
    outputRange: [0.2, 1, 0.2], // Opacidad correspondiente: de 0.2 a 0.8 y de vuelta a 0.2
  });

  // Determinar los colores basados en props o tema
  const finalBaseColor = baseColor || theme.colors.imagePlaceholder; // Usar color del tema o prop

  return (
    <Animated.View
      style={createSxStyle(
        {
          bg: finalBaseColor, // Usamos el color base
          style: [
            styles.skeletonBase,
            { width, height, borderRadius },
            { opacity }, // Aplicamos la opacidad animada
            style, // Permite sobrescribir estilos desde el padre
          ],
        },
        theme
      )}
      {...rest}
    />
  );
};

const styles = StyleSheet.create({
  skeletonBase: {
    overflow: 'hidden',
  },
});

Skeleton.displayName = 'Skeleton';