import Styles from "@/constants/Styles";
import { MaterialIcons } from "@expo/vector-icons";
import { Pressable, Text, View } from "react-native";
import Modal from 'react-native-modal';

type Props = {
   isVisible: boolean
   setVisible: (value: boolean) => void
   title?: string
   children: React.ReactNode
   animation?: 'slide' | 'none' | 'fade'
   height?: number
   backdropPressable?: boolean
}

export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true }: Props) {
   return (
      // <Modal
      //    animationType={animation}
      //    transparent={true} visible={isVisible}>
      //    <View style={[Styles.modalBgTransparant]}>
      //       <View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
      //          <View style={Styles.titleContainer}>
      //             <Text style={Styles.textDefault}>{title}</Text>
      //             <Pressable onPress={() => setVisible(false)}>
      //                <MaterialIcons name="close" color="black" size={22} />
      //             </Pressable>
      //          </View>
      //          <View style={Styles.contentContainer}>
      //             {children}
      //          </View>
      //       </View>
      //    </View>
      // </Modal>

      <Modal
         animationIn={"slideInUp"}
         animationOut={"slideOutDown"}
         isVisible={isVisible}
         onSwipeComplete={() => setVisible(false)}
         swipeDirection="down"
         hideModalContentWhileAnimating={true}
         onBackdropPress={() => { setVisible(!backdropPressable) }}
         style={[{ justifyContent: 'flex-end', margin: 0 }]}
         animationOutTiming={500}
         animationInTiming={500}
         backdropTransitionInTiming={500}
         backdropTransitionOutTiming={500}
         useNativeDriverForBackdrop={true}
      >
         <View style={[Styles.modalContentNew, height != undefined ? { height: `${height}%` } : { height: '25%' }]}>
            <View style={[Styles.titleContainerNew]}>
               <Text style={Styles.textDefault}>{title}</Text>
               <Pressable onPress={() => setVisible(false)}>
                  <MaterialIcons name="close" color="black" size={22} />
               </Pressable>
            </View>
            <View style={Styles.contentContainer}>
               {children}
            </View>
         </View>
      </Modal>
   )
}