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

const NetworkStatusBar = (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 NSBarAnim=useRef(new Animated.Value(0)).current;

    
    useEffect(() => { 
        
    }, []);

    useEffect(() => { 
        showAnim()
    }, [props.isInternetAvailable]);

    function showAnim(){
        console.log('show con change:',props.showConnChange,props.isInternetAvailable)
        if(props.showConnChange==true){
            animateView()
        }
    }

    function animateView(){
        // show 
        Animated.timing(NSBarAnim, {
            toValue: 1,
            duration: 500,
            useNativeDriver:(Platform.OS=='ios'?false:true),
        }).start();

        if(props.isInternetAvailable==true){
            // hide  NS bar
            setTimeout(()=>{
                console.log('hidebar')
                Animated.timing(NSBarAnim, {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver:(Platform.OS=='ios'?false:true),
                }).start();
            },2500)
            props.show_ConnChange({showConnChange:false})
        }
        

    }

    const tY=NSBarAnim.interpolate({
        inputRange:[0,1],
        outputRange:[50,0],
    });

    return (
        <Animated.View style={[customStyle.netSBar,(props.isInternetAvailable==true ?customStyle.netSBarGreen:customStyle.netSBarGrey),
            {transform:[{translateY:tY}]}
        ]}>
            <Text style={[customStyle.netSBarText,(props.isInternetAvailable==true ?customStyle.netSBarGreen_Text:customStyle.netSBarGrey_Text)]}>{(props.isInternetAvailable==true?'Back Online':'No Connection! You are offline')}</Text>
        </Animated.View>
    )
};
export default NetworkStatusBar;