import React from "react";
import * as Sentry from "@sentry/nextjs";

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);

			setTimeout(() => 
			{
				const store = global.store.getState();
				const { company, user, auth, } = store;

				//console.log("LAYOUT", "CDM", { store });

				const payload = {
					userID: user.email !== undefined && user.email !== null && user.email !== "" ? user.email : user.phone, 
					companyID: company.active, 
				};

				//console.log("LAYOUT", "CDM", { payload });

				if(payload.companyID !== undefined && payload.companyID !== null && payload.companyID !== "")
				{
					//console.log("LAYOUT", "CDM", { payload });
					//console.log("LAYOUT", "CDM", "CHECK YM");

					if(window.ym !== undefined)
					{
//						console.log({ ym: window.ym, id: process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID });
						window.ym(process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID, 'userParams', payload);
					}

//					console.log({ payload });
//					console.log({ company, user, auth, });

					Sentry.configureScope(function (scope) {
						scope.setTag("account", `${ payload.companyID }`);
						scope.setTag("offstage", `${ auth.observer }`);
						scope.setUser({ email: user.email, phone: user.phone });
					});
				}
			}, 100);
		}
	}

	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 });

		if(window.ym !== undefined)
		{
			//console.log({ ym: window.ym });
		}
	}

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

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

	_handle_onMessageRemove = (index) => 
	{
		if(process.env.CLIENT_SHOW_ERROR_MESSAGE)
		{
			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>
		)
	}
}