mobile-darmasaba/components/document/menuBottomSelectDocument.tsx

import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import DrawerBottom from "../drawerBottom";
import ItemAccordion from "../itemAccordion";
import ItemDetailMember from "../itemDetailMember";
import MenuItemRow from "../menuItemRow";

export default function MenuBottomSelectDocument() {
   const [isModal, setModal] = useState(false)
   const [isInformasi, setInformasi] = useState(false)
   const open = useSharedValue(false)

   const onPress = () => {
      open.value = !open.value;
   };


   return (
      <>
         <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"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="trash-can-outline" color="white" size={25} />}
                  title="Hapus"
                  onPress={() => { }}
                  column="many"
                  color="white"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
                  title="Ganti Nama"
                  onPress={() => { }}
                  column="many"
                  color="white"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="share-variant-outline" color="white" size={25} />}
                  title="Bagikan"
                  onPress={() => { }}
                  column="many"
                  color="white"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="dots-vertical" color="white" size={25} />}
                  title="Lainnya"
                  onPress={() => { setModal(true) }}
                  column="many"
                  color="white"
               />
            </View>
         </View>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="folder-move-outline" color="black" size={25} />}
                  title="Pindah"
                  onPress={() => { }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="folder-multiple-outline" color="black" size={25} />}
                  title="Salin"
                  onPress={() => { }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
                  title="Informasi"
                  onPress={() => { setModal(false); setInformasi(true) }}
               />
            </View>
         </DrawerBottom>

         <DrawerBottom animation="slide" isVisible={isInformasi} setVisible={setInformasi} title="Informasi Dokumen" height={80}>
            <View style={[Styles.contentItemCenter, Styles.mb10]}>
               <Ionicons name="document-text-sharp" color={'#9fcff8'} size={80} />
            </View>

            <View>
               <ItemDetailMember category="dokumen" value="123456789" border />
               <ItemDetailMember category="type" value="file" border />
               <ItemDetailMember category="location" value="home" border />
               <ItemDetailMember category="owner" value="Sosial Kemasyarakatan" border />
               <ItemDetailMember category="calendar" value="12 Maret 2025" border />
               <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={onPress}>
                  <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 }]} >
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                     <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
                        <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                     </View>
                  </ScrollView>
               </ItemAccordion>
            </View>
         </DrawerBottom>
      </>
   )
}