import React from 'react';

import Modularity from 'modularity-front';

import './FullScreenContainer.css';

const FluidContainer = Modularity.Modules.FluidContainer;
const Module = Modularity.Module;


class FullScreen extends Module {

	constructor(props) {
		super(props);
		this.TopContainer = this.ModuleSystem.ghostModule(this.getId() + "Navbar", "FluidContainer", {});
	}

	render() {
		return <div style={{ ...this.props.style, width: '100vw', height: '100vh', maxWidth: '100%'}}  className={this.ClassName.value}>
			<div style={{
				width: '100%',
				height: '100%',
				position: 'absolute',
				top: 0,
				left: 0,
				backgroundColor: this.Background.value,
				backgroundImage: `url(${this.Background.value})`,
				backgroundPosition: 'center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: this.Stretch.value ? '100% 100%' : 'cover'
			}}>
			</div>
			<div className="FullScreenContent">
				{super.render()}
			</div>
			{this.TopContainer.render()}
		</div>
	}

}

FullScreen.Inputs = {
	Background: {
		type: Module.Types.Text,
		defaultValue: "red"
	},
	withNavbar: {
		type: Module.Types.Boolean,
		defaultValue: false
	},
	Stretch: {
		type: Module.Types.Boolean,
		defaultValue: false
	},
	ClassName: {
		type: Module.Types.Text,
		defaultValue: ""
	}
}

FullScreen.EditPosition = "top-center";

FullScreen.Category = "Nikatlas";

export default FullScreen;