'use strict';

import React, { Component } from 'react';
import './style/main.scss';
import {Provider} from "sbx-react-core";
import Modal from "sbx-react-modal";
import Disconnect from "components/Disconnect";

@Provider({
	connected: 'connected'
})

export default class Layout extends Component {
	componentWillReceiveProps(nextProps, nextContext) {
		if(
			!nextProps.connected.feed && nextProps.connected.feed !== this.props.connected.feed ||
			!nextProps.connected.user && nextProps.connected.user !== this.props.connected.user
		)
		{
			return this.disconnect.show()
		}
		if(
			nextProps.connected.feed && nextProps.connected.feed !== this.props.connected.feed && (nextProps.connected.user || this.props.connected.user) ||
			nextProps.connected.user && nextProps.connected.user !== this.props.connected.user && (nextProps.connected.feed || this.props.connected.feed)
		)
		{
			return this.disconnect.hide()
		}
	}
	render(){

		let {header, aside, main} = this.props;

		return (
		    <div className={'document'}>
				<Modal
					className="disconnect-modal"
					size="sm"
					ref={e => this.disconnect = e}
				>
					{(data, hide) => <Disconnect hide={hide}/>}
				</Modal>
					{aside && <aside className="app-aside">{aside}</aside>}
					<main className="app-main">
						{header && header}

						{main &&
							<section className="app-section">
								{main}
							</section>
						}
					</main>
			</div>
		)
	}
}