import * as React from "react";
import { StatusBar, View} from "react-native";
import { globalStyles,customStyles, GetPageTheme } from "../styles/Global";
import { useRoute } from '@react-navigation/native';
import NetworkStatusBar from "./NetworkStatusBar";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import LinearGradient from "react-native-linear-gradient";

const Container = (props) => {
  const route = useRoute();
  const globalStyle=globalStyles(props.DarkMode,route.name);
  const insets = useSafeAreaInsets();
  const paddingS=props.pt!=null?{paddingTop:props.pt}:{};
  const PageTheme=GetPageTheme(props.DarkMode,route.name);



  if(props.avoidSafeArea  && props.avoidSafeArea==true){
    return (
      <View style={[globalStyle.container,paddingS]}>
        {props.children}
        <NetworkStatusBar {...props} />
      </View>
    );
  }
  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF', }}>
          {/* Top Safe Area with Gradient */}
          {route.name != "MpinLogin" && route.name != "Mpin" && route.name != "Project" && route.name != "initialScreen" &&   route.name != "Login" &&
          <LinearGradient
            colors={[PageTheme.$gradient1, PageTheme.$primary_color]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            style={{ height: insets.top }}
          >
            <StatusBar
              backgroundColor={'transparent'}
              translucent={true}
              {...props}
              barStyle={"light-content"}
            />
          </LinearGradient> }
    
          {/* Main Content */}
          <View style={[globalStyle.container]}>
            {props.children}
            <NetworkStatusBar {...props} />
          </View>
    
          {/* Bottom Safe Area (white) */}
          <View style={{ height: insets.bottom, backgroundColor: '#FFFFFF' }} />
        </View>
  );
};

export default Container;