mobile-darmasaba/components/project/sectionMember.tsx

import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { apiDeleteProjectMember, apiGetProjectOne } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { Pressable, View } from "react-native";
import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux";
import DrawerBottom from "../drawerBottom";
import ImageUser from "../imageNew";
import MenuItemRow from "../menuItemRow";
import ModalConfirmation from "../ModalConfirmation";
import Skeleton from "../skeleton";
import Text from "../Text";

type Props = {
   id: string;
   idUser: string;
   name: string;
   email: string;
   img: string;
   position: string;
};

export default function SectionMember({ status, refreshing }: { status: number | undefined, refreshing?: boolean }) {
   const { colors } = useTheme();
   const dispatch = useDispatch()
   const entityUser = useSelector((state: any) => state.user)
   const update = useSelector((state: any) => state.projectUpdate)
   const [isModal, setModal] = useState(false);
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [data, setData] = useState<Props[]>([]);
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 4 })
   const [memberChoose, setMemberChoose] = useState({ id: '', name: '' })

   async function handleLoad(loading: boolean) {
      try {
         setLoading(loading)
         const hasil = await decryptToken(String(token?.current));
         const response = await apiGetProjectOne({ user: hasil, cat: "member", id });
         setData(response.data);
      } catch (error) {
         console.error(error);
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => { handleLoad(false) }, [update.member]);
   useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing]);
   useEffect(() => { handleLoad(true) }, []);

   async function handleDeleteMember() {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiDeleteProjectMember({ user: hasil, idUser: memberChoose.id }, id)
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menghapus anggota' })
            dispatch(setUpdateProject({ ...update, member: !update.member }))
            setModal(false);
         }
      } catch (error: any) {
         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus anggota" })
      }
   }

   return (
      <>
         <View style={[Styles.mb15]}>
            <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
               <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
               {!loading && data.length > 0 && (
                  <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data.length} orang</Text>
               )}
            </View>

            <View style={{ gap: 6 }}>
               {loading ? (
                  arrSkeleton.map((_, index) => (
                     <View key={index} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                        <Skeleton width={40} height={40} borderRadius={20} />
                        <View style={{ flex: 1, gap: 5 }}>
                           <Skeleton width={60} height={12} widthType="percent" borderRadius={6} />
                           <Skeleton width={35} height={10} widthType="percent" borderRadius={6} />
                        </View>
                     </View>
                  ))
               ) : data.length > 0 ? (
                  data.map((item, index) => (
                     <Pressable
                        key={index}
                        onPress={() => {
                           if (status === 3) return
                           setMemberChoose({ id: item.idUser, name: item.name })
                           setModal(true)
                        }}
                        style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                           backgroundColor: colors.card,
                           borderRadius: 10,
                           borderWidth: 1,
                           borderColor: colors.icon + '18',
                           paddingHorizontal: 12,
                           paddingVertical: 10,
                           gap: 12,
                        }}
                     >
                        <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                        <View style={{ flex: 1 }}>
                           <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
                        </View>
                        <View style={{
                           backgroundColor: colors.dimmed + '15',
                           borderRadius: 20,
                           paddingHorizontal: 8,
                           paddingVertical: 3,
                        }}>
                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
                              {item.position}
                           </Text>
                        </View>
                     </Pressable>
                  ))
               ) : (
                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text>
               )}
            </View>
         </View>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={memberChoose.name}>
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                  title="Lihat Profil"
                  onPress={() => {
                     setModal(false)
                     router.push(`/member/${memberChoose.id}`)
                  }}
               />
               {entityUser.role !== "user" && entityUser.role !== "coadmin" && (
                  <MenuItemRow
                     icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                     title="Keluarkan"
                     onPress={() => {
                        setModal(false)
                        setTimeout(() => setShowDeleteModal(true), 600)
                     }}
                  />
               )}
            </View>
         </DrawerBottom>

         <ModalConfirmation
            visible={showDeleteModal}
            title="Konfirmasi"
            message="Apakah Anda yakin ingin mengeluarkan anggota?"
            onConfirm={() => { setShowDeleteModal(false); handleDeleteMember() }}
            onCancel={() => setShowDeleteModal(false)}
            confirmText="Keluarkan"
            cancelText="Batal"
         />
      </>
   );
}