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

const CustomLoader = (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=props.fullHeight?{height:HP('100%')+StatusBar.currentHeight}:{};

  return (
    <View style={[customStyle.loaderBackdrop]}>      
      <View style={customStyle.loaderCon}>
          {
          Platform.OS==='ios' &&
          <View style={customStyle.spinnerCon}>
              <ActivityIndicator  style={customStyle.spinner} size="large" color={PageTheme.$primary_color}  />
          </View>
          }
          {
          Platform.OS!=='ios' &&
          <View style={customStyle.spinnerCon}>
              <ActivityIndicator  style={customStyle.spinner} size="large" color={PageTheme.$primary_color}  />
              <ActivityIndicator  style={customStyle.spinnerInner2} size={32} color={PageTheme.$secondary_color_light} />
              <ActivityIndicator  style={customStyle.spinnerInner} size={28} color={PageTheme.$primary_color} />
          </View>
          }
          {props.title && <Text style={customStyle.loaderTitle}>{props.title}</Text>}
      </View>
    </View>
  );
};
export default CustomLoader;