mobile-darmasaba/app/(application)/division/[id]/(fitur-division)/document/index.tsx

import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import HeaderRightDocument from "@/components/document/headerDocument";
import ItemFile from "@/components/document/itemFile";
import ModalMore from "@/components/document/modalMore";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow";
import ModalFloat from "@/components/modalFloat";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiDocumentDelete, apiDocumentRename, apiGetDocument } from "@/lib/api";
import { setUpdateDokumen } from "@/lib/dokumenUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import {
   AntDesign,
   MaterialCommunityIcons,
   MaterialIcons,
} from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import {
   Pressable,
   SafeAreaView,
   ScrollView,
   Text,
   ToastAndroid,
   View,
} from "react-native";
import { useDispatch, useSelector } from "react-redux";

type Props = {
   id: string;
   category: string;
   name: string;
   extension: string;
   idStorage: string;
   path: string;
   createdBy: string;
   share: boolean;
   createdAt: string;
   updatedAt: string;
};

type PropsPath = {
   id: string;
   name: string;
};

export default function DocumentDivision() {
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [path, setPath] = useState("home");
   const [data, setData] = useState<Props[]>([]);
   const [dataJalur, setDataJalur] = useState<PropsPath[]>([]);
   const [dariSelectAll, setDariSelectAll] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<any>([]);
   const [selectAll, setSelectAll] = useState(false);
   const [shareSelected, setShareSelected] = useState(false);
   const [copyAllowed, setCopyAllowed] = useState(true);
   const [modalMore, setModalMore] = useState(false);
   const [isRename, setRename] = useState(false);
   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.dokumenUpdate);
   const [bodyRename, setBodyRename] = useState({
      id: "",
      name: "",
      path: "",
      idDivision: id,
      extension: "",
   });

   async function handleLoad() {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiGetDocument({
            user: hasil,
            path,
            division: id,
            category: "all",
         });
         setData(response.data);
         setDataJalur(response.jalur);
      } catch (error) {
         console.error(error);
      }
   }

   useEffect(() => {
      handleLoad();
   }, [path, update]);

   const handleCheckboxChange = (index: number) => {
      setDariSelectAll(false);
      if (selectedFiles.some((i: any) => i.id == data[index].id)) {
         setSelectedFiles(
            selectedFiles.filter((i: any) => i.id != data[index].id)
         );
      } else {
         setSelectedFiles([
            ...selectedFiles,
            {
               id: data[index].id,
               name: data[index].name,
               path: data[index].path,
               extension: data[index].extension,
               category: data[index].category,
               share: data[index].share,
               idStorage: data[index].idStorage,
            },
         ]);
      }
   };

   function cek() {
      if (selectedFiles.length == data.length) {
         setSelectAll(true);
      } else {
         setSelectAll(false);
      }

      const shareSelected = selectedFiles.some((i: any) => i?.share == true);
      if (shareSelected) {
         setShareSelected(true);
      } else {
         setShareSelected(false);
      }

      const cek = selectedFiles.some((i: any) => i?.category == "FOLDER");
      if (cek || selectedFiles.length > 1) {
         setCopyAllowed(false);
      } else {
         setCopyAllowed(true);
      }
   }

   useEffect(() => {
      cek();
   }, [selectedFiles]);

   const handleSelectAll = () => {
      if (!selectAll) {
         setDariSelectAll(false);
         for (let index = 0; index < data.length; index++) {
            if (!selectedFiles.some((i: any) => i.id == data[index].id)) {
               const newArr = {
                  id: data[index].id,
                  name: data[index].name,
                  path: data[index].path,
                  extension: data[index].extension,
                  category: data[index].category,
                  share: data[index].share,
                  idStorage: data[index].idStorage,
               };
               setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]);
            }
         }
      } else {
         setDariSelectAll(true);
         setSelectedFiles([]);
      }
   };

   const handleBatal = () => {
      setSelectedFiles([]);
      setSelectAll(false);
      setDariSelectAll(false);
   };

   function onChooseRename() {
      setBodyRename({
         ...bodyRename,
         id: selectedFiles[0].id,
         name: selectedFiles[0].name,
         path: selectedFiles[0].path,
         extension: selectedFiles[0].extension,
      });
      setRename(true);
   }

   async function handleRename() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiDocumentRename({ user: hasil, ...bodyRename })
         if (response.success) {
            ToastAndroid.show("Berhasil mengubah nama", ToastAndroid.SHORT)
            dispatch(setUpdateDokumen(!update))
            handleBatal()
         } else {
            ToastAndroid.show(response.message, ToastAndroid.SHORT)
         }
      } catch (error) {
         console.error(error)
         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT)
      } finally {
         setRename(false)
      }
   }

   async function handleDelete() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiDocumentDelete({ user: hasil, data: selectedFiles })
         if (response.success) {
            ToastAndroid.show("Berhasil menghapus", ToastAndroid.SHORT)
            dispatch(setUpdateDokumen(!update))
            handleBatal()
         } else {
            ToastAndroid.show(response.message, ToastAndroid.SHORT)
         }
      } catch (error) {
         console.error(error)
         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT)
      }
   }

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () =>
                  selectedFiles.length > 0 || dariSelectAll ? (
                     <ButtonHeader
                        item={<MaterialIcons name="close" size={20} color="white" />}
                        onPress={() => {
                           handleBatal();
                        }}
                     />
                  ) : (
                     <ButtonBackHeader
                        onPress={() => {
                           router.back();
                        }}
                     />
                  ),
               headerTitle:
                  selectedFiles.length > 0 || dariSelectAll
                     ? `${selectedFiles.length} item terpilih`
                     : "Dokumen Divisi",
               headerTitleAlign: "center",
               headerRight: () =>
                  selectedFiles.length > 0 || dariSelectAll ? (
                     <ButtonHeader
                        item={
                           <MaterialIcons name="checklist-rtl" size={20} color="white" />
                        }
                        onPress={() => {
                           handleSelectAll();
                        }}
                     />
                  ) : (
                     <HeaderRightDocument path={path} />
                  ),
            }}
         />
         <ScrollView style={{ height: "100%" }}>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={[Styles.rowItemsCenter]}>
                  {dataJalur.map((item, index) => (
                     <Pressable
                        key={index}
                        style={[Styles.rowItemsCenter]}
                        onPress={() => {
                           setPath(item.id);
                        }}
                     >
                        {item.id != "home" && (
                           <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
                        )}
                        <Text> {item.name} </Text>
                     </Pressable>
                  ))}
               </View>
               <View>
                  {data.length > 0 ? (
                     data.map((item, index) => {
                        const isSelected = selectedFiles.some(
                           (i: any) => i?.id == item.id
                        );
                        return (
                           <ItemFile
                              key={index}
                              category={
                                 item.category == "FOLDER"
                                    ? item.share
                                       ? "folder-shared"
                                       : "folder"
                                    : item.share
                                       ? "file-shared"
                                       : "file"
                              }
                              title={
                                 item.category == "FOLDER"
                                    ? item.name
                                    : `${item.name}.${item.extension}`
                              }
                              dateTime={item.createdAt}
                              onChecked={() => {
                                 handleCheckboxChange(index);
                              }}
                              checked={isSelected}
                              onPress={() => {
                                 setPath(item.id);
                              }}
                           />
                        );
                     })
                  ) : (
                     <Text
                        style={[
                           Styles.textDefault,
                           Styles.cGray,
                           Styles.mt15,
                           { textAlign: "center" },
                        ]}
                     >
                        Tidak ada dokumen
                     </Text>
                  )}
               </View>
            </View>
         </ScrollView>
         {(selectedFiles.length > 0 || dariSelectAll) && (
            <View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
               <View style={[Styles.rowItemsCenter, { justifyContent: "center" }]}>
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="download-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Unduh"
                     onPress={() => { }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length == 0 || !copyAllowed}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="trash-can-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Hapus"
                     onPress={() => {
                        AlertKonfirmasi({
                           title: "Konfirmasi",
                           desc: "Apakah anda yakin ingin menghapus dokumen?",
                           onPress: () => {
                              handleDelete()
                           },
                        });
                     }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length == 0 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="pencil-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Ganti Nama"
                     onPress={() => {
                        onChooseRename();
                     }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length != 1 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="share-variant-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Bagikan"
                     onPress={() => { }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length != 1 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="dots-vertical"
                           color="white"
                           size={25}
                        />
                     }
                     title="Lainnya"
                     onPress={() => {
                        setModalMore(true);
                     }}
                     column="many"
                     color="white"
                     disabled={
                        selectedFiles.length == 1 ||
                           (selectedFiles.length > 0 && !shareSelected)
                           ? false
                           : true
                     }
                  />
               </View>
            </View>
         )}

         <DrawerBottom
            animation="slide"
            isVisible={modalMore}
            setVisible={setModalMore}
            title=""
         >
            <ModalMore
               onClose={() => {
                  setModalMore(false);
               }}
               data={selectedFiles}
               share={shareSelected}
            />
         </DrawerBottom>

         <ModalFloat
            title="Ganti Nama"
            isVisible={isRename}
            setVisible={setRename}
            onSubmit={() => { handleRename() }}
            disableSubmit={bodyRename.name == ""}
         >
            <View>
               <InputForm
                  type="default"
                  placeholder="Nama File"
                  value={bodyRename.name}
                  onChange={(text) => {
                     setBodyRename({ ...bodyRename, name: text });
                  }}
               />
            </View>
         </ModalFloat>
      </SafeAreaView>
   );
}