import React, { useRef, useEffect, useState } from "react";
import {
  View,
  Text,
  Image,
  FlatList,
  Dimensions,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { useNavigation } from "@react-navigation/native"; // Mengimpor useNavigation

const { width } = Dimensions.get("window");

const slides = [
  {
    id: "1",
    image: require("../assets/images/onboarding1.png"),
    text: "Temukan lokasi tempat pembuangan sampah terdekat.",
  },
  {
    id: "2",
    image: require("../assets/images/onboarding2.png"),
    text: "Laporkan sampah dan bantu lingkungan jadi lebih bersih.",
  },
  {
    id: "3",
    image: require("../assets/images/onboarding3.png"),
    text: "Tukar poinmu dengan barang bermanfaat untuk sehari-hari.",
  },
];

const Onboarding = () => {
  const flatListRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const navigation = useNavigation(); // Mendapatkan objek navigasi

  useEffect(() => {
    const interval = setInterval(() => {
      if (currentIndex < slides.length - 1) {
        flatListRef.current?.scrollToIndex({
          index: currentIndex + 1,
          animated: true,
        });
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [currentIndex]);

  const handleNext = () => {
    navigation.navigate("AksesAkun"); // Mengarahkan ke layar "AksesAkun"
  };

  const renderItem = ({ item }) => (
    <View style={styles.slide}>
      <Image source={item.image} style={styles.image} resizeMode="contain" />
      <Text style={styles.text}>{item.text}</Text>
    </View>
  );

  const onViewableItemsChanged = useRef(({ viewableItems }) => {
    if (viewableItems.length > 0) {
      setCurrentIndex(viewableItems[0].index);
    }
  }).current;

  const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 });

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={slides}
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        onViewableItemsChanged={onViewableItemsChanged}
        viewabilityConfig={viewConfigRef.current}
      />

      <View style={styles.dotsContainer}>
        {slides.map((_, index) => (
          <View
            key={index}
            style={[styles.dot, index === currentIndex && styles.activeDot]}
          />
        ))}
      </View>

      {currentIndex === slides.length - 1 && (
        <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
          <Text style={styles.nextText}>LANJUT</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff", marginBottom: 0 },
  slide: { width, alignItems: "center", justifyContent: "center", padding: 20 },
  image: { width: 250, height: 250, marginBottom: 30 },
  text: {
    fontSize: 18,
    color: "#000",
    textAlign: "center",
    paddingHorizontal: 20,
  },
  dotsContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 40,
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: "#aaa",
    marginHorizontal: 5,
  },
  activeDot: { backgroundColor: "#435739" },
  nextButton: {
    position: "absolute",
    bottom: 50,
    alignSelf: "flex-end",
    backgroundColor: "#435739",
    paddingHorizontal: 26,
    paddingVertical: 16,
    elevation: 3,
    borderRadius: 10,
    marginHorizontal: 20,
  },
  nextText: { color: "#fff", fontSize: 18, fontWeight: "bold" },
});

export default Onboarding;