import React from 'react'
import { ImageBackground, KeyboardAvoidingView, SafeAreaView, StatusBar, Platform, StyleSheet, } from 'react-native'
import Colors from '../../constants/Colors'


type Prpos = {
    children: React.ReactNode,  // Default null
}

const imageBackground = require('../../../assets/images/background/d_background.png')


export default WithBackgroundPageViewer = (props: Prpos) => (
    <ImageBackground
        style = { styles.imageBackground }
        source = { imageBackground }
        resizeMode = 'stretch'
    >
        <StatusBar backgroundColor={ Colors.d_Header }/>

        <SafeAreaView
            style = { styles.container }
        >
                <KeyboardAvoidingView
                    style = { styles.container }
                    behavior = { Platform.OS == 'ios' ? 'padding' : null }
                >
                    { props.children }
                </KeyboardAvoidingView>
        </SafeAreaView>
    </ImageBackground>
)
WithBackgroundPageViewer.defaultProps = {
    children: null,
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    imageBackground: {
        flex: 1,
    },
})