/**
 * @name		Page Builder CK
 * @copyright	Copyright (C) 2024. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */


/*
 * Plugin to manage the flipbox element
 */
(function() {
	"use strict";
	var PBCK_flipbox = function(selector) {
		if (!(this instanceof PBCK_flipbox)) return new PBCK_flipbox(selector);

		let t = getInstance(this, selector);
		if (t === false) return false;

		function getInstance(instance, selector, opts) {
			var PBCK_flipboxs = window.PBCK_flipboxs || {};

			if (PBCK_flipboxs.hasOwnProperty(selector)) {
				console.log('PBCK_flipbox : instance revealed');
				return PBCK_flipboxs[selector]; // instance already exists in the page
			}

			instance.id =  selector;
			instance.wrap =  document.querySelector('#' + selector + ' > .inner');

			if (! instance.wrap) {
				console.log('PBCK Audio : Error, no player container found in ' + selector + ' selector');
				return false;
			}

			PBCK_flipboxs[selector] = instance;
			window.PBCK_flipboxs = PBCK_flipboxs; // adds the new instance in the page

			return instance;
		}

		function getStyles(item, prop) {
			return parseFloat(window.getComputedStyle(item, null).getPropertyValue(prop));
		}

		t.setHeight = function() {
			// show both sides to calculate the dimensions
			t.wrap.querySelectorAll('.innercontent').forEach(function(item) {item.style.display = 'block';})
			
			const front = t.wrap.querySelector('.flipboxck-front');
			const rear = t.wrap.querySelector('.flipboxck-rear');
			const frontInner = t.wrap.querySelector('.flipboxck-front-inner');
			const rearInner = t.wrap.querySelector('.flipboxck-rear-inner');
			const frontpaddingtop = getStyles(front, 'padding-top');
			const frontpaddingbottom = getStyles(front, 'padding-bottom');
			const rearpaddingtop = getStyles(rear, 'padding-top');
			const rearpaddingbottom = getStyles(rear, 'padding-bottom');
			const frontHeight = frontInner.clientHeight + frontpaddingtop + frontpaddingbottom;
			const rearHeight = rearInner.clientHeight + rearpaddingtop + rearpaddingbottom;

			t.wrap.querySelector('.flipboxck-front').style.removeProperty('height');
			if (rearInner.clientHeight > frontInner.clientHeight) {
				t.wrap.querySelector('.flipboxck-front').style.height = rearHeight.toString() + 'px';
//				t.wrap.querySelector('.flipboxck-rear').style.height = '';
			} else {
//				t.wrap.querySelector('.flipboxck-rear').style.height = frontInner.clientHeight.toString() + 'px';
				t.wrap.querySelector('.flipboxck-front').style.height = '';
			}
			
			// set the height back to normal
			t.wrap.querySelectorAll('.innercontent').forEach(function(item) {item.style.display = '';})
		}

		t.setHeight();

		
		window.addEventListener("resize", (event) => {
			t.setHeight();
		});

		// return instance
		return t;
	}
	window.PBCK_flipbox = PBCK_flipbox;
})(document);

// function used in the interface when creating a new flipbox
function pbck_flipbox_init(id) {
	new PBCK_flipbox(id);
	let item = document.querySelector('#' + id);
	ckFlipBoxInitInterface(item);
}

function ckFlipBoxInitInterface(item) {
	ckFlipBoxAddFlipButton(item);
	ckFlipBoxAddWorkspaceEvents(item);
}

function ckFlipBoxAddWorkspaceEvents(item) {
	item.querySelector('.flipboxck-flip-button').onclick = function() {
		var t = new PBCK_flipbox(item.id);
		item.classList.toggle('ckhover');
		t.setHeight();
	}
}

function ckFlipBoxAddFlipButton(item) {
	let button = document.createElement('div');
	button.className = "flipboxck-flip-button";
	button.innerHTML = '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-repeat"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3" /><path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3" /></svg>'
	+ '</div>';
	item.append(button);
}

document.addEventListener("DOMContentLoaded", (event) => {
	document.querySelectorAll('.cktype[data-type="flipbox"]').forEach(function(item) {
		new PBCK_flipbox(item.id);
	});
});