mobile-darmasaba/app/(application)/division/[id]/info.tsx

import AlertKonfirmasi from "@/components/alertKonfirmasi"
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
import DrawerBottom from "@/components/drawerBottom"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"

export default function InformationDivision() {
   const { id } = useLocalSearchParams()
   const [isModal, setModal] = useState(false)

   function handleMemberOut() {
      AlertKonfirmasi({
         title: 'Konfirmasi',
         desc: 'Apakah anda yakin ingin mengeluarkan anggota?',
         onPress: () => {
            ToastAndroid.show('Berhasil mengeluarkan anggota', ToastAndroid.SHORT)
            setModal(false)
         }
      })
   }

   function handleMemberAdmin() {
      ToastAndroid.show('Berhasil memberhentikan admin', ToastAndroid.SHORT)
      setModal(false)
   }

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Informasi Divisi',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightDivisionInfo id={id} />,
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={[Styles.mb15]}>
                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
                  <View style={[Styles.wrapPaper]}>
                     <Text>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</Text>
                  </View>
               </View>
               <View style={[Styles.mb15]}>
                  <Text style={[Styles.textDefault, Styles.mv05]}>5 Anggota</Text>
                  <View style={[Styles.wrapPaper]}>
                     <BorderBottomItem
                        borderType="none"
                        icon={
                           <View style={[Styles.iconContent, ColorsStatus.gray]}>
                              <Feather name="user-plus" size={25} color={'#384288'} />
                           </View>
                        }
                        title="Tambah Anggota"
                     />

                     <BorderBottomItem
                        borderType="bottom"
                        onPress={() => { setModal(true) }}
                        icon={
                           <Image
                              source={require("../../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="Admin"
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        onPress={() => { setModal(true) }}
                        icon={
                           <Image
                              source={require("../../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="Admin"
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        onPress={() => { setModal(true) }}
                        icon={
                           <Image
                              source={require("../../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="Anggota"
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        onPress={() => { setModal(true) }}
                        icon={
                           <Image
                              source={require("../../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="Anggota"
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        onPress={() => { setModal(true) }}
                        icon={
                           <Image
                              source={require("../../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="Anggota"
                     />
                  </View>
               </View>
            </View>
         </ScrollView>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Amalia">
            <View>
               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}>
                  <View style={[Styles.rowItemsCenter]}>
                     <View style={[Styles.iconContent, ColorsStatus.info]}>
                        <MaterialIcons name="verified-user" size={25} color='#19345E' />
                     </View>
                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                        <View style={[Styles.ml10]}>
                           <Text style={[Styles.textDefault]}>Memberhentikan sebagai admin</Text>
                        </View>
                     </View>
                  </View>
               </Pressable>

               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
                  <View style={[Styles.rowItemsCenter]}>
                     <View style={[Styles.iconContent, ColorsStatus.info]}>
                        <MaterialCommunityIcons name="close-circle" size={25} color='#19345E' />
                     </View>
                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                        <View style={[Styles.ml10]}>
                           <Text style={[Styles.textDefault]}>Keluarkan dari divisi</Text>
                        </View>
                     </View>
                  </View>
               </Pressable>
            </View>
         </DrawerBottom>
      </SafeAreaView>
   )
}