import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import Feather from '@expo/vector-icons/Feather';
import { router } from "expo-router";
import { useEffect, useState } from "react";
import { View } from "react-native";
import { useSelector } from "react-redux";
import { ButtonHeader } from "../buttonHeader";

export function HeaderRightHome() {
   const { decryptToken, token } = useAuthSession()
   const [notification, setNotification] = useState(0)
   const updateNotification = useSelector((state: any) => state.notificationUpdate)

   async function handleData() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDataHome({ cat: "header", user: hasil })
         setNotification(response.data.totalNotif)
      } catch (error) {
         console.error(error)
      }
   }

   useEffect(() => {
      handleData()
   }, [updateNotification]);


   return (
      <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
         <ButtonHeader item={<Feather name="search" size={18} color="white" />} onPress={() => { router.push('/search') }} />
         <ButtonHeader valueTop={notification > 0 ? true : false} item={<Feather name="bell" size={18} color="white" />} onPress={() => { router.push('/notification') }} />
         <ButtonHeader item={<Feather name="user" size={18} color="white" />} onPress={() => { router.push('/profile') }} />
      </View>
   )
}