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

const { StatusBarManager } = NativeModules;
const statusBarHeight = StatusBarManager.HEIGHT;
const OS = Platform.OS;

const CustomSafeArea = ({customStatusBar, hideTopBar, children}) => {
  if(customStatusBar && OS === "ios") {
    return (
      <View style={{flex: 1}}>
        <View style={styles.statusBarHeight} />
        {children}
      </View>
    )
  }

  return (
    <>
      <SafeAreaView style={styles.customSafeArea(hideTopBar)}>
        { OS === "ios" && <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 40, width: '100%', backgroundColor: Theme.colors.white }}/> }

        <View style={{ flex: 1, backgroundColor: Theme.colors.white }}>
          {children}
        </View>
      </SafeAreaView>

    </>
  )
};

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