import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { Octicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { useEffect, useState } from "react";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
import { useDispatch, useSelector } from 'react-redux';

export default function Profile() {
   const { signOut, token, decryptToken } = useAuthSession()
   const dispatch = useDispatch()
   const entities = useSelector((state: any) => state.entities)
   const [error, setError] = useState(false)
   const [role, setRole] = useState('developer')

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

   async function handleUserLogin() {
      const hasil = await decryptToken(String(token?.current))
      apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
      setRole(entities.idUserRole)
   }



   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Profile',
               headerTitleAlign: 'center',
               headerShadowVisible: false,
               headerRight: () => <ButtonHeader
                  item={<Octicons name="sign-out" size={20} color="white" />}
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Keluar',
                        desc: 'Apakah anda yakin ingin keluar?',
                        onPress: () => { signOut() }
                     })
                  }}
               />
            }}
         />
         <ScrollView>
            <View style={{ flexDirection: 'column' }}>
               <View style={[Styles.wrapHeadViewMember]}>
                  <Image
                     source={error ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${entities.img}` }}
                     onError={() => { setError(true) }}
                     style={[Styles.userProfileBig]}
                  />
                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
               </View>
               <View style={[Styles.p15]}>
                  <View style={[Styles.rowSpaceBetween]}>
                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
                     {
                        role != "developer" && <Text style={[Styles.textLink]}>Edit</Text>
                     }
                  </View>
                  <ItemDetailMember category="nik" value={entities.nik} />
                  <ItemDetailMember category="group" value={entities.group} />
                  <ItemDetailMember category="position" value={entities.position} />
                  <ItemDetailMember category="phone" value={`0${entities.phone}`} />
                  <ItemDetailMember category="email" value={entities.email} />
                  <ItemDetailMember category="gender" value={entities.gender == "F" ? 'Perempuan' : 'Laki-laki'} />
               </View>
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}