import React from "react";
import Manager from "../../Manager";

export default class AccountLayout extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			messages: [], 
		}
	}

	componentDidMount()
	{
		if(window !== undefined)
		{
			window.addEventListener("_track", this._handle_onTrack);
			window.addEventListener("_move", this._handle_onMove);
			window.addEventListener("_message", this._handle_onMessage);
		}

		console.log("CDM", { state: this.state });
	}

	componentWillUnmount()
	{
		if(window !== undefined)
		{
			window.removeEventListener("_track", this._handle_onTrack);
			window.removeEventListener("_move", this._handle_onMove);
			window.removeEventListener("_message", this._handle_onMessage);
		}
	}

	_handle_onTrack = (event) => 
	{
		//event.detail.path
		console.log("LAYOUT", "_handle_onTrack", { event, props: this.props });
	}

	_handle_onMove = (event) => 
	{
		this.props.router.push(event.detail.path);
	}

	_handle_onMessage = (event) => 
	{
		const messages = [ ...this.state.messages ];
		messages.push(event.detail);
		this.setState({ messages });
	}

	_handle_onMessageRemove = (index) => 
	{
		const messages = [ ...this.state.messages ];
		messages.splice(index, 1);
		this.setState({ messages });
	}

	render()
	{
		const { messages } = this.state;

		return (
			<main>
				<section>
					<div className="clear"></div>
					<div className="overflow">
						<div className="container">
							{ this.props.children }
						</div>
					</div>
				</section>
				<Manager/>
				{ messages.length > 0 && (
					<div className="messages_overlay">
						{ messages.map((message, index) => (
							<div className={ `overlay_message_${ message.type }` } key={ index }>
								<h4>{ message.title }</h4>
								<p>{ message.content }</p>
								<div className="button" onClick={ () => this._handle_onMessageRemove(index) }></div>
							</div>
						))}
					</div>
				) }
			</main>
		)
	}
}