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 { Pressable, ScrollView, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import ItemAccordion from "../itemAccordion";
import ItemDetailMember from "../itemDetailMember";
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[]>([])

   async function handleInformasi() {
      try {
         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)
      }
   }

   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>

         <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>
      </>
   )
}