mobile-darmasaba/app/(application)/banner/index.tsx

import AlertKonfirmasi from "@/components/alertKonfirmasi"
import HeaderRightBannerList from "@/components/banner/headerBannerList"
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import DrawerBottom from "@/components/drawerBottom"
import MenuItemRow from "@/components/menuItemRow"
import ModalLoading from "@/components/modalLoading"
import Text from "@/components/Text"
import { ConstEnv } from "@/constants/ConstEnv"
import Styles from "@/constants/Styles"
import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
import { setEntities } from "@/lib/bannerSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import * as FileSystem from 'expo-file-system'
import { startActivityAsync } from 'expo-intent-launcher'
import { router, Stack } from "expo-router"
import * as Sharing from 'expo-sharing'
import { useState } from "react"
import { Alert, Image, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
import ImageViewing from 'react-native-image-viewing'
import * as mime from 'react-native-mime-types'
import Toast from "react-native-toast-message"
import { useDispatch, useSelector } from "react-redux"

type Props = {
   id: string
   title: string
   extension: string
   image: string
}

export default function BannerList() {
   const { decryptToken, token } = useAuthSession()
   const [isModal, setModal] = useState(false)
   const entities = useSelector((state: any) => state.banner)
   const [dataId, setDataId] = useState('')
   const [selectFile, setSelectFile] = useState<Props | null>(null)
   const dispatch = useDispatch()
   const [refreshing, setRefreshing] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)
   const [viewImg, setViewImg] = useState(false)

   const handleDeleteEntity = async () => {
      try {
         const hasil = await decryptToken(String(token?.current));
         const deletedEntity = await apiDeleteBanner({ user: hasil }, dataId);
         if (deletedEntity.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
            apiGetBanner({ user: hasil }).then((data) =>
               dispatch(setEntities(data.data))
            );
         } else {
            Toast.show({ type: 'small', text1: 'Gagal menghapus data', })
         }
      } catch (error) {
         console.error(error)
         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
      } finally {
         setModal(false)
      }
   };

   const handleRefresh = async () => {
      setRefreshing(true)
      const hasil = await decryptToken(String(token?.current));
      apiGetBanner({ user: hasil }).then((data) =>
         dispatch(setEntities(data.data))
      );
      await new Promise(resolve => setTimeout(resolve, 2000));
      setRefreshing(false)
   };

   const openFile = () => {
      setModal(false)
      setLoadingOpen(true)
      let remoteUrl = ConstEnv.url_storage + '/files/' + selectFile?.image;
      const fileName = selectFile?.title + '.' + selectFile?.extension;
      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
      const mimeType = mime.lookup(fileName)

      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
         const contentURL = await FileSystem.getContentUriAsync(uri);
         try {

            if (Platform.OS == 'android') {
               await startActivityAsync(
                  'android.intent.action.VIEW',
                  {
                     data: contentURL,
                     flags: 1,
                     type: mimeType as string,
                  }
               );
            } else if (Platform.OS == 'ios') {
               Sharing.shareAsync(localPath);
            }
         } catch (error) {
            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
         } finally {
            setLoadingOpen(false)
         }
      });
   };


   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Banner',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightBannerList />
            }}
         />
         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
         <ScrollView
            refreshControl={
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
               />
            }
            style={[Styles.h100]}
         >
            {
               entities.length > 0
                  ?
                  <View style={[Styles.p15, Styles.mb100]}>
                     {entities.map((index: any, key: number) => (
                        <BorderBottomItem
                           key={key}
                           onPress={() => {
                              setDataId(index.id)
                              setSelectFile(index)
                              setModal(true)
                           }}
                           borderType="all"
                           icon={
                              <Image
                                 source={{ uri: `${ConstEnv.url_storage}/files/${index.image}` }}
                                 style={[Styles.imgListBanner]}
                              />
                           }
                           title={index.title}
                           width={65}
                        />
                     ))}
                  </View>
                  :
                  <View style={[Styles.p15, Styles.mb100]}>
                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                  </View>
            }


         </ScrollView>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title="Menu">
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
                  title="Edit"
                  onPress={() => {
                     setModal(false)
                     router.push(`/banner/${dataId}`)
                  }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
                  title="Lihat"
                  onPress={() => {
                     setModal(false)
                     setTimeout(() => {
                        setViewImg(true);
                     }, 1000);
                     // openFile() 
                  }}
               />
               <MenuItemRow
                  icon={<Ionicons name="trash" color="black" size={25} />}
                  title="Hapus"
                  onPress={() => {
                     setModal(false)
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
                        desc: 'Apakah anda yakin ingin menghapus data?',
                        onPress: () => { handleDeleteEntity() }
                     })
                  }}
               />
            </View>
         </DrawerBottom>

         <ImageViewing
            images={[{ uri: `${ConstEnv.url_storage}/files/${selectFile?.image}` }]}
            imageIndex={0}
            visible={viewImg}
            onRequestClose={() => setViewImg(false)}
            doubleTapToZoomEnabled
         />
      </SafeAreaView>
   )
}