import React from 'react';
import {injectSheet} from '../../lib/theme';
import Footer from '../Footer';
import StyleGrid from '../../lib/StyleGrid';
import {LoadingLangScreen} from "../../component/LoadingLangScreen";

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 2,
        width: '100%',
        margin: '0 auto auto 0',
        padding: theme.gutter.base * 10 + 'px ' + theme.gutter.base * 3 + 'px ' + theme.gutter.base * 2 + 'px ' + theme.gutter.base * 3 + 'px ',
        [StyleGrid.smUp]: {
            padding: theme.gutter.base * 4 + 'px ' + theme.gutter.base * 2 + 'px ' + theme.gutter.base * 2 + 'px ' + theme.gutter.base * 6 + 'px ',
            overflow: 'auto',
            height: '100%',
            width: '20%',
            flexGrow: 4
        },
    },
    innerWrapper: {
        marginBottom: theme.gutter.base * 6 + 'px'
    },
    logo: {
        height: '48px',
        width: '48px'
    }
});

class Content extends React.Component {
    render() {
        const {classes} = this.props;
        return (
            <div className={classes.wrapper} id='control-panel--content'>
                <div className={classes.innerWrapper}>
                    <LoadingLangScreen loading={this.props.loading_lang}/>
                    {this.props.children}
                </div>
                <Footer/>
            </div>
        );
    }
}

export default injectSheet(styling)(Content);
