import Styles from "@/constants/Styles";
import { apiGetBanner } from "@/lib/api";
import { setEntities } from "@/lib/bannerSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import React, { useEffect } from "react";
import { Dimensions, Image, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import { useDispatch, useSelector } from "react-redux";

export default function CaraouselHome() {
   const { decryptToken, token } = useAuthSession()
   const ref = React.useRef<ICarouselInstance>(null);
   const width = Dimensions.get("window").width;
   const progress = useSharedValue<number>(0);
   const dispatch = useDispatch()
   const entities = useSelector((state: any) => state.banner)

   async function handleBannerView() {
      const hasil = await decryptToken(String(token?.current))
      apiGetBanner({ user: hasil }).then((data) => dispatch(setEntities(data.data)))
   }

   useEffect(() => {
      handleBannerView()
   }, [dispatch]);

   return (
      <View style={[Styles.mv15]}>
         <Carousel
            ref={ref}
            width={width}
            height={width / 2.5}
            data={entities}
            loop={true}
            autoPlay={true}
            autoPlayInterval={5000}
            onProgressChange={progress}
            renderItem={({ index }) => (
               <Image
                  source={{ uri: `https://wibu-storage.wibudev.com/api/files/${entities[index].image}` }}
                  style={[Styles.caraoselContent]}
               />
            )}
         />
      </View>
   )
}