import React from 'react';
import { Flex } from 'grid-styled';
import  { ThemeProvider } from 'styled-components';
import PropTypes from 'prop-types';
import * as Theme from '../styles/Theme';
import { childrenInsertProps } from '../utils/Utils';

const AppBox = Flex.extend`
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    justify-content: center;
    background-color: ${props => props.theme.appBackgroundColor}
`;

var _theme = {};

class App extends React.Component{
    constructor(props){
        super(props);
        _theme = {...Theme};

        if(this.props.theme) _theme = {..._theme, ...this.props.theme};
    }

    render(){
        return(
            <AppBox theme={_theme}>
                {childrenInsertProps(this.props.children, {theme: _theme})}
            </AppBox>
        );
    }
}

App.propTypes = {
    theme: PropTypes.object
}

export default App;
