import { router } from "expo-router";
import { Text, TouchableOpacity, View, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import tw from "twrnc";
import Swiper from "react-native-swiper";
import { useRef, useState } from "react";
import { onboarding } from "@/constants";
import CustomButton from "@/components/CustomButton";
const Onboarding = () => {
    const swiperRef = useRef<Swiper>(null);
    const [activeIndex, setActiveIndex] = useState(0);
    const isLastSlide = activeIndex === onboarding.length-1;
    return (
        <SafeAreaView style={tw`flex h-full items-center justify-between bg-white`}>
            <TouchableOpacity
                onPress={() => { router.replace("/(auth)/sign-up"); }}
                style={tw`w-full flex justify-end items-end p-5 `}>
                <Text style={tw`text-black flex text-base font-JakartaBold `}>Skip</Text>
            </TouchableOpacity>
            <Swiper ref={swiperRef} loop={false}
                dot={<View style={tw`w-[32px] h-[4px] mx-1 bg-[#E2E8F0] rounded-full `} />}
                activeDot={
                    <View style={tw`w-[32px] h-[4px] mx-1 bg-[#0286FF] rounded-full `} />
                }
                onIndexChanged={(index) => setActiveIndex(index)}
            >
                {onboarding.map((item) =>
                (<View key={item.id} style={tw`flex items-center justify-center p-5`}>
                    <Image
                        source={item.image}
                        style={tw`w-full h-[300px]`}
                        resizeMode="contain"
                    />
                    <View style={tw`flex flex-row items-center justify-center w-full mt-10`}>
                        <Text style={tw`text-black text-3xl font-bold mx-10 text-center`}>{item.title}</Text>
                    </View>
                    <Text style={tw`text-lg font-JakartaSemiBold text-center text-[#858585] mx-10 mt-3`}>{item.description}</Text>
                </View>))
                }
            </Swiper>
            <CustomButton title={isLastSlide ? "Get Started": "Next"}
            onPress={()=>isLastSlide ? router.replace("/(auth)/sign-up") : swiperRef.current ?. scrollBy(1)}
            style={tw`w-11/12 mt-10`}/>
        </SafeAreaView>
    )
}
export default Onboarding;