import React, { useEffect, useState } from 'react';
import { 
    Platform, 
    SafeAreaView, 
    StyleSheet,
    View,
    NativeModules
} from 'react-native';
import { Dimensions } from 'react-native'
import { useSelector } from 'react-redux';
import Theme from '../components/theme.style.js';

const { height } = Dimensions.get('window'); 
const { StatusBarManager } = NativeModules;
const statusBarHeight = StatusBarManager.HEIGHT;
const OS = Platform.OS;

const CustomSafeArea = ({customStatusBar, children}) => {
    const [isIphone11,setIsIphone11] = useState(false);
    const app_theme = useSelector(state => state.appThemeReducer.theme)
    
    useEffect(() =>{
        const majorVersionIOS = parseInt(Platform.Version, 10);
        if (majorVersionIOS <= 15) {
            console.log(height)
            if(height == 896 || height == 844){
                setIsIphone11(true);
            }
        }
    },[])

    if(customStatusBar && OS === "ios") {
        return (
            <View style={[styles.customSafeArea(app_theme), {marginTop:isIphone11?-5:-3}]}>
                <View style={styles.statusBarHeight} />
                {children}
            </View>
        )
    }

    return (
        <SafeAreaView style={[styles.customSafeArea(app_theme),{marginTop:isIphone11?-5:-3}]}>
            {children}
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    customSafeArea: (app_theme) => {
        return {
            flex: 1,
            backgroundColor: app_theme.theme.dark ? app_theme.theme.colors.background : Theme.colors.white
        }
    },
    statusBarHeight: {
        height: statusBarHeight,
        backgroundColor: Theme.colors.primary,
        width: '100%'
    }
});
export default CustomSafeArea;