import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import Styles from "@/constants/Styles";
import { AntDesign, MaterialCommunityIcons, MaterialIcons, Octicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";

export default function Profile() {
   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Profile',
               headerTitleAlign: 'center',
               headerRight: () => <ButtonHeader
                  item={<Octicons name="sign-out" size={20} color="white" />}
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Keluar',
                        desc: 'Apakah anda yakin ingin keluar?',
                        onPress: () => { router.push('/') }
                     })
                  }}
               />
            }}
         />
         <ScrollView>
            <View style={{ flexDirection: 'column' }}>
               <View style={[Styles.wrapHeadViewMember]}>
                  <Image
                     source={require("../../assets/images/user.jpeg")}
                     style={[Styles.userProfileBig]}
                  />
                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
               </View>
               <View style={[Styles.p15]}>
                  <View style={[Styles.rowSpaceBetween]}>
                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
                     <Text style={[Styles.textLink]}>Edit</Text>
                  </View>
                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>NIK</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>123456789</Text>
                  </View>

                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <AntDesign name="tags" size={25} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Lembaga Desa</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
                  </View>

                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialCommunityIcons name="account-tie" size={25} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Jabatan</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>Bendahara</Text>
                  </View>

                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialIcons name="phone" size={25} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>No Telepon</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>09482903842</Text>
                  </View>

                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialIcons name="email" size={25} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Email</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>ayu@gmail.com</Text>
                  </View>


                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialCommunityIcons name="gender-male-female" size={25} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Jenis Kelamin</Text>
                     </View>
                     <Text style={[Styles.textDefaultSemiBold]}>Perempuan</Text>
                  </View>

               </View>
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}