import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Toast from "react-native-toast-message";
import ModalConfirmation from "../ModalConfirmation";
import DrawerBottom from "../drawerBottom";
import { InputForm } from "../inputForm";
import ItemAccordion from "../itemAccordion";
import ItemDetailMember from "../itemDetailMember";
import MenuItemRow from "../menuItemRow";
import ModalFloat from "../modalFloat";
import ModalSelectMultiple from "../modalSelectMultiple";
import ModalSalinMove from "./modalSalinMove";
import Text from "../Text";


type Props = {
   onDone: () => void
}

export default function MenuBottomSelectDocument({ onDone }: Props) {
   const { colors } = useTheme();
   const [isModal, setModal] = useState(false)
   const [isInformasi, setInformasi] = useState(false)
   const [isRename, setRename] = useState(false)
   const [isShare, setShare] = useState(false)
   const [isMoveCopy, setMoveCopy] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [valMoveCopy, setValMoveCopy] = useState<'move' | 'copy'>('copy')
   const open = useSharedValue(false)

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

   function handleMoveCopy(val: 'copy' | 'move') {
      setValMoveCopy(val)
      setModal(false)
      setMoveCopy(true)
   }


   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={() => {
                     setShowDeleteModal(true)
                  }}
                  column="many"
                  color="white"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
                  title="Ganti Nama"
                  onPress={() => { setRename(true) }}
                  column="many"
                  color="white"
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="share-variant-outline" color="white" size={25} />}
                  title="Bagikan"
                  onPress={() => { setShare(true) }}
                  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>

         <ModalFloat title="Ganti Nama Dokumen" isVisible={isRename} setVisible={setRename}
            onSubmit={() => {
               onDone()
               Toast.show({ type: 'small', text1: 'Berhasil mengganti nama dokumen', })
            }}>
            <View>
               <InputForm type="default" placeholder="Nama File" required label="Nama File" />
            </View>
         </ModalFloat>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="folder-move-outline" color={colors.text} size={25} />}
                  title="Pindah"
                  onPress={() => { handleMoveCopy('move') }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="folder-multiple-outline" color={colors.text} size={25} />}
                  title="Salin"
                  onPress={() => { handleMoveCopy('copy') }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="information-variant" color={colors.text} 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, { borderColor: colors.background }]} onPress={onPress}>
                  <View style={[Styles.rowItemsCenter]}>
                     <MaterialCommunityIcons name="share-variant-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                     <Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
                  </View>
                  <MaterialCommunityIcons name="chevron-down" size={22} color={colors.text} />
               </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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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={colors.text} 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>

         <ModalSelectMultiple choose="dinas" title="Bagikan" category="share-division" open={isShare} close={setShare}
            onSelect={() => {
               Toast.show({ type: 'small', text1: 'Success', })
               setShare(false)
            }}
         />
         <ModalSalinMove open={isMoveCopy} close={setMoveCopy} category={valMoveCopy} onConfirm={(value: string) => { }} dataChoose={[]} />

         <ModalConfirmation
            visible={showDeleteModal}
            title="Konfirmasi"
            message="Apakah anda yakin ingin menghapus data?"
            onConfirm={() => {
               setShowDeleteModal(false)
               onDone()
               Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
            }}
            onCancel={() => setShowDeleteModal(false)}
            confirmText="Hapus"
            cancelText="Batal"
         />
      </>
   )
}