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==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 <View></View>;
  }
  
  
};
export default CustomModal;