import React, { useState, useEffect} from 'react';
import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

//boton de reporte
const BotonReporte = () => {
  const navigation = useNavigation();
  const [imageIndex, setImageIndex] = useState(0);
  const images = [
    require("../assets/FigIcon/IconReporte/BotonReporte.png"),
    require("../assets/FigIcon/IconReporte/BotonReportePress.png"), 
  ];

  const switchImage = () => {
    setImageIndex((imageIndex + 1) % images.length);
    setTimeout(() => {
      navigation.navigate('Reportes', { imageIndex });
    }, 400);
  };

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setImageIndex(0);
    });
    return unsubscribe;
  }, [navigation]);

  return (
    <View style={styles.contenedor}>
      <TouchableOpacity onPress={switchImage}>
        <Image source={images[imageIndex]} style={styles.image} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  contenedor: {
    justifyContent: 'center',
    alignItems: 'center',
    position: "relative"
  },
  image: {
    resizeMode:"center",
    position: "absolute",
    left: 80,
    height: 45,
    top: -160,
    width: 50
  },
});

export default BotonReporte;