let _yap_win_counter = 0;

const _yap_default_btn_function = function() { return true; };
const _yap_btn_defaults = {
	caption: 'Text',
	highlight: false,
	onClick: _yap_default_btn_function
}

const _yap_defaults =
{
	color: 'blue',
	icon: '',
	title: 'Title',
	content: 'Popup text.',
	animTime: 300,
	width: 512,
	overlayClickClose: true,
	showCloseIcon: false,
	onBeforeOpen: function(window_object) {},
	onContentCreating: function() { return this.content; },
	buttons: [
		Object.assign({}, _yap_btn_defaults, { caption: 'OK' })
	]
}

function _yap_create_dom_element_tree(element_tree)
{
	let root_el = document.createElement(element_tree.tag);
	for (let attr in ('attrs' in element_tree ? element_tree.attrs : {}))
	{
		root_el.setAttribute(attr, element_tree.attrs[attr]);
	}
	root_el.innerHTML = ('html' in element_tree ? element_tree.html : '');
	for (let child of ('children' in element_tree ? element_tree.children : []))
	{
		root_el.appendChild(_yap_create_dom_element_tree(child));
	}
	return root_el;
}

function _yap_show_form(window_id)
{
	let win = document.querySelector('.yap-overlay-container[data-yap-window-id="'+window_id+'"]');
	if (win != null)
	{
		let wnd_overlay = win.childNodes[0];
		wnd_overlay.classList.add('show');
		wnd_overlay.childNodes[0].classList.add('show');
	}
}

function _yap_hide_form(window_id)
{
	let win = document.querySelector('.yap-overlay-container[data-yap-window-id="'+window_id+'"]');
	if (win != null)
	{
		let wnd_overlay = win.childNodes[0];
		wnd_overlay.classList.remove('show');
		wnd_overlay.childNodes[0].classList.remove('show');
	}
}

function _yap_close_form(window_id)
{
	let win = document.querySelector('.yap-overlay-container[data-yap-window-id="'+window_id+'"]');
	if (win != null) { win.remove(); }
}

const yaplib =
{
	createForm: function(winParams)
	{
		let params = Object.assign({}, _yap_defaults, winParams);
		
		let yap_buttons = [];
		let win_button_params = [];
		
		for (let btn_conf of params.buttons)
		{
			let btn_params = Object.assign({}, _yap_btn_defaults, btn_conf);
			win_button_params.push(btn_params);
			
			let btn_cls = btn_params.highlight ? params.color : 'default';
			yap_buttons.push({ tag: 'button', attrs: { 'class': 'btn-'+btn_cls }, html: btn_params.caption });
		}
		
		let close_btn_attrs = { 'class': 'yap-close-icon' };
		if (!params.showCloseIcon)
		{
			close_btn_attrs.style = 'display: none;';
		}
		
		let content_str = params.onContentCreating();
		let win_title_text = params.title;
		if (params.icon != '')
		{
			win_title_text = ' '+win_title_text;
		}
		
		let element_tree = {
			tag: 'div', attrs: { 'class': 'yap-overlay-container', 'data-yap-window-id': _yap_win_counter }, children: [ {
				tag: 'div', attrs: { 'class': 'yap-overlay', 'style': 'transition-duration: '+params.animTime+'ms;' }, children: [ {
					tag: 'div',
					attrs: { 'class': 'yap-window yap-border-'+params.color, 'style': 'width: '+params.width+'px; transition-duration: '+params.animTime+'ms;' },
					children: [
						{ tag: 'div', attrs: close_btn_attrs, html: '×' },
						{ tag: 'div', attrs: { 'class': 'yap-title' }, children: [
							{ tag: 'span', attrs: { 'class': 'yap-icon yap-icon-'+params.color }, children: [
								{ tag: 'i', attrs: { 'class': params.icon } }
							] },
							{ tag: 'span', html: win_title_text }
						] },
						{ tag: 'div', attrs: { 'class': 'yap-content' }, html: content_str },
						{ tag: 'div', attrs: { 'class': 'yap-bottom-buttons' }, children: yap_buttons }
					]
				} ]
			} ]
		};
		
		let wnd = _yap_create_dom_element_tree(element_tree);
		document.body.appendChild(wnd);
		
		let wnd_obj = {
			_win_id: _yap_win_counter,
			_dom: wnd,
			_is_closing: false,
			_anim_time: params.animTime,
			close: function()
			{
				if (this._is_closing) { return; }
				this._is_closing = true;
				_yap_hide_form(this._win_id);
				setTimeout(() => { _yap_close_form(this._win_id); }, this._anim_time+5);
			}
		};
		
		if (win_button_params.length > 0)
		{
			let dom_btns = document.querySelectorAll('.yap-overlay-container[data-yap-window-id="'+_yap_win_counter+'"] > div > div > .yap-bottom-buttons > *');
			for (let i = 0; i < dom_btns.length; i++)
			{
				let btn_dom_obj = dom_btns[i];
				btn_dom_obj.addEventListener('click', function(evt) {
					let self = this;
					if (win_button_params[i].onClick())
					{
						self.style.cursor = 'default';
						wnd_obj.close();
					}
				});
			}
		}
		
		let close_btn = document.querySelector('.yap-overlay-container[data-yap-window-id="'+_yap_win_counter+'"] > div > div > .yap-close-icon');
		close_btn.addEventListener('click', function(evt) {
			this.style.cursor = 'default';
			wnd_obj.close();
		});
		
		if (params.overlayClickClose)
		{
			let overlay_comp = document.querySelector('.yap-overlay-container[data-yap-window-id="'+_yap_win_counter+'"] > .yap-overlay');
			overlay_comp.addEventListener('click', function(evt) {
				if (evt.target.classList.contains('yap-overlay'))
				{
					wnd_obj.close();
				}
			});
		}
		
		_yap_win_counter += 1;
		
		params.onBeforeOpen(wnd_obj);
		setTimeout(() => { _yap_show_form(wnd_obj._win_id); }, 1);
		return wnd_obj;
	}
}