import React from "react";
import { Text, View, StatusBar, StyleSheet } from "react-native";
import Modal from "react-native-modal";
import { customStyles } from "../styles/Global";
import { useRoute } from '@react-navigation/native';

const CustomModal = (props) => {
  const route = useRoute();
  const customStyle = customStyles(props.DarkMode, route.name);

  if(!props.showModal) null;
  
  return (
    <>
      <StatusBar 
        translucent={true}
        backgroundColor="transparent"
        barStyle={props.DarkTheme ? "light-content" : "dark-content"}
      />
      
      <Modal
        isVisible={props.showModal}
        animationIn="fadeIn"
        animationOut="fadeOut"
        backdropOpacity={0.7}
        style={styles.modal}
        statusBarTranslucent={true}
        avoidKeyboard={true}
        onBackdropPress={props.onBackdropPress || (() => {})}
      >
        <View style={[styles.modalContent, customStyle.customModal, props.style,{padding:"2%"}]}>
          {props.title && (
            <Text style={[customStyle.customModal_Title, props.titleStyle]}>
              {props.title}
            </Text>
          )}
          {props.message && (
            <Text style={[customStyle.customModal_Message, props.messageStyle]}>
              {props.message}
            </Text>
          )}
          {props.children}
        </View>
      </Modal>
    </>
  );
};

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    alignItems: 'center',
    margin: 0,
  },
  modalContent: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 20,
    // width: '80%',
    // maxWidth: 400,
  }
});

export default CustomModal;


// import React,{useRef,useEffect} from "react";
// import { Text, TouchableOpacity ,View,Image,Animated,ActivityIndicator,StatusBar} from "react-native";
// import { customeButtons,GetPageTheme,customStyles,globalStyles,HP } from "../styles/Global";
// import { useRoute } from '@react-navigation/native';
// import { AntDesign } from "./icons";

// const CustomModal = (props) => {
//   const route = useRoute();
//   const PageTheme=GetPageTheme(props.DarkTheme,route.name);
//   const globalStyle=globalStyles(props.DarkMode,route.name);
//   const customStyle=customStyles(props.DarkMode,route.name);

//   const htStyle={height:HP('100%')+StatusBar.currentHeight};
//   if(!props.showModal) null;

//   if(props.showModal==true){
//     return (
//         <View style={[customStyle.loaderBackdrop]}>      
//           <View style={[customStyle.customModal,props.style?props.style:{}]}>
//             {(props.title!=null) && <Text style={[customStyle.customModal_Title,(props.titleStyle?props.titleStyle:{})]}>{props.title}</Text>}
//             {(props.message!=null) && <Text style={[customStyle.customModal_Message,(props.messageStyle?props.messageStyle:{})]}>{props.message}</Text>}
//             {props.children}
//           </View>
//         </View>
//       );
//   }
//   else {
//     return 
//   }
  
  
// };
// export default CustomModal;