mobile-darmasaba/components/document/modalInformasi.tsx

import Styles from "@/constants/Styles";
import { apiGetDocumentInformasi } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import ItemAccordion from "../itemAccordion";
import ItemDetailMember from "../itemDetailMember";
import ModalLoading from "../modalLoading";
import Text from "../Text";

type Props = {
   category: string,
   name: string,
   extension: string,
   createdAt: string,
   path: string,
   division: string,
   createdBy: string
}

type PropsShare = {
   id: string
   name: string
}

export default function ModalInformasi({ data }: { data: any }) {
   const open = useSharedValue(false)
   const [dataInformasi, setDataInformasi] = useState<Props>()
   const { token, decryptToken } = useAuthSession()
   const [dataShare, setDataShare] = useState<PropsShare[]>([])
   const [loading, setLoading] = useState(true)

   async function handleInformasi() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDocumentInformasi({ user: hasil, item: data.id, cat: 'lainnya' })
         setDataInformasi(response.data)

         const responseShare = await apiGetDocumentInformasi({ user: hasil, item: data.id, cat: 'share' })
         setDataShare(responseShare.data)
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => {
      handleInformasi()
   }, [])

   return (
      <>
         <View style={[Styles.contentItemCenter, Styles.mb10]}>
            {
               dataInformasi?.extension == 'folder'
                  ?
                  <Ionicons name="folder-open-sharp" color={'#f9cc40'} size={80} />
                  :
                  <Ionicons name="document-text-sharp" color={'#9fcff8'} size={80} />
            }
         </View>

         {
            loading ? (
               <View>
                  <ActivityIndicator size="large" />
               </View>
            ) : (
               <View>
                  <ItemDetailMember category="dokumen" value={dataInformasi?.category == 'FOLDER' ? dataInformasi?.name : `${dataInformasi?.name}.${dataInformasi?.extension}`} border />
                  <ItemDetailMember category="type" value={dataInformasi?.category} border />
                  <ItemDetailMember category="location" value={dataInformasi?.path} border />
                  <ItemDetailMember category="owner" value={dataInformasi?.division} border />
                  <ItemDetailMember category="calendar" value={dataInformasi?.createdAt} border />
                  <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={() => { open.value = !open.value; }}>
                     <View style={[Styles.rowItemsCenter]}>
                        <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
                     </View>
                     <MaterialCommunityIcons name="chevron-down" size={22} color="black" />
                  </Pressable>
                  <ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
                     <ScrollView style={[Styles.w100, { height: 200 }]} >
                        {
                           dataShare.length > 0 ? (
                              dataShare.map((item, index) => (
                                 <View key={index} style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                                    <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
                                 </View>
                              ))
                           )
                              : (
                                 <View style={[Styles.ml10, Styles.mt02]}>
                                    <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                                 </View>
                              )
                        }
                     </ScrollView>
                  </ItemAccordion>
               </View>
            )
         }
      </>
   )
}