/**
 * @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 gallery
 */
(function() {
	"use strict";
	var PBCK_gallery = function(selector, opts) {
		if (!(this instanceof PBCK_gallery)) return new PBCK_gallery(selector, opts);

		var defaults = {
			// 'per_page' : ''
		};

		let t = getInstance(this, selector, opts);

		t.destroy = function(selector) {
			// if (typeof(PBCK_gallerys) === 'undefined') return;
			// if (typeof(t.wrap) === 'undefined') return;
			removeControls();
			// if (PBCK_gallerys.hasOwnProperty(selector)) {
				// delete window.PBCK_gallerys[selector];
			// }
			
			// t = null;
			t.wrap.querySelectorAll('.pbck_gallery_item').forEach(function(item) {
				item.classList.remove('pbck-show');
				item.classList.remove('pbck-hide');
			});
		}

		if (t === false) return t;
		if (! t.wrap.getAttribute('data-nbcols')) return t;
		if (t.wrap.getAttribute('data-pagination') !== '1') return t;

		function getInstance(instance, selector, opts) {
			var PBCK_gallerys = window.PBCK_gallerys || {};
			if (PBCK_gallerys.hasOwnProperty(selector)) {
				return PBCK_gallerys[selector]; // instance already exists in the page
			}

			// merge options
			instance.opts = {
				...defaults,
				...opts
			};
			instance.id =  selector;
			instance.wrap =  document.querySelector('#' + selector);

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

			instance.state = true;

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

			return instance;
		}

		var per_page = parseInt(t.wrap.getAttribute('data-nbcols'));
		var total_items = t.wrap.querySelectorAll('.pbck_gallery_item').length;
		let navigation = renderNavigation();
		let pagination = renderPagination();

		// remove existing controls
		removeControls();

		t.wrap.querySelector('.pbck_gallery').innerHTML += navigation;
		t.wrap.innerHTML += pagination;

		addEvents();

		function renderNavigation() {
			// navigation
			let html = '<div class="pbck-gallery-navigation">';
			html += '	<div class="pbck-gallery-navigation-prev" role="button" tabindex="0" arial-label="' + Joomla.Text._('CK_PREVIOUS') + '"></div>';
			html += '	<div class="pbck-gallery-navigation-next" role="button" tabindex="0" arial-label="' + Joomla.Text._('CK_NEXT') + '"></div>';
			html += '</div>';

			return html;
		}

		function renderPagination() {
			let nb_pages = parseInt( (total_items - 1) / per_page) + 1;
			if (nb_pages <= 1) return '';

			// pagination
			let html = '<div class="pbck-gallery-pagination" data-perpage="' + per_page + '"><ul class="">';
			let i = 1;
			let page = 1;
			while (i <= nb_pages) {
				if (i == page) {
					html += '<li class="active"><a href="javascript:void(0)" data-page="' + i + '" class="pbck-gallery-pagination-link" arial-label="' + Joomla.Text._('CK_PAGE_NUMBER') + ' ' + i +'">' + i + '</a></li>';
				} else {
					html += '<li><a href="javascript:void(0)" data-page="' + i + '" class="pbck-gallery-pagination-link" arial-label="' + Joomla.Text._('CK_PAGE_NUMBER') + ' ' + i +'">' + i + '</a></li>';
				}
				i++;
			}
			html += '</ul></div>';

			return html;
		}

		function addEvents() {
			var pagination = t.wrap.querySelector('.pbck-gallery-pagination');
			if (! pagination || pagination.getAttribute('done') === '1') return;

			pagination.setAttribute('done', '1');

			// add the pagination controls
			pagination.querySelectorAll('a.pbck-gallery-pagination-link').forEach(function(btn) {
				btn.addEventListener('click', function() {
					pagination.querySelectorAll('li').forEach((el) => el.classList.remove('active'));
					btn.parentElement.classList.add('active');
					// $(this).parent().addClass('active');
					let page = parseInt(btn.getAttribute('data-page'));
					// let mediaboxcont = btn.closest('.mediaboxck_cont');
					// var mediaboxcontinner = mediaboxcont.querySelector('.mediaboxck_cont_inner');
					let start = per_page * (page - 1) + 1;
					let end = start + per_page - 1;
					var links = t.wrap.querySelectorAll('.pbck_gallery_item:nth-child(n+' + start + '):nth-child(-n+' + end + ')');

					// hide all links
					t.wrap.style.height = t.wrap.innerHeight;
					t.wrap.querySelectorAll('.pbck_gallery_item').forEach(function(item) {
						item.classList.add('pbck-hide');
						item.classList.remove('pbck-show');
					});
					links.forEach(function(item) {
						item.classList.remove('pbck-hide');
						item.classList.add('pbck-show');
						t.wrap.style.height = '';
					});
				});
				// show needed links
			});

			// add the navigation controls
			['click','keydown'].forEach( evt => 
				t.wrap.querySelector('.pbck-gallery-navigation-prev').addEventListener(evt, function(e) {
					// The Enter/Return key
					if (evt === 'keydown' && e.key !== "Enter") {
						return;
					}
					if (! pagination.querySelector('li.active').previousSibling) return;
					// pagination.querySelector('.pbck-gallery-navigation-disabled').removeClass('pbck-gallery-navigation-disabled');
					pagination.querySelector('li.active').previousSibling.querySelector('a').dispatchEvent(new Event('click'));
					// if (! pagination.querySelector('li.active').previousSibling) $(this).addClass('pbck-gallery-navigation-disabled');
				})
			);

			['click','keydown'].forEach( evt => 
				t.wrap.querySelector('.pbck-gallery-navigation-next').addEventListener(evt, function(e) {
					// The Enter/Return key
					if (evt === 'keydown' && e.key !== "Enter") {
						return;
					}
					if (! pagination.querySelector('li.active').nextSibling) return;
					// if (pagination.querySelector('.pbck-gallery-navigation-disabled')) pagination.querySelector('.pbck-gallery-navigation-disabled').removeClass('pbck-gallery-navigation-disabled');
					// pagination.querySelector('li.active').nextSibling.querySelector('a').trigger('click');
					pagination.querySelector('li.active').nextSibling.querySelector('a').dispatchEvent(new Event('click'));
					// if (! pagination.querySelector('li.active').nextSibling) $(this).addClass('pbck-gallery-navigation-disabled');
				})
			);
		}

		function removeControls() {
			// remove existing controls
			if (t.wrap.querySelector('.pbck-gallery-navigation')) t.wrap.querySelector('.pbck-gallery-navigation').remove();
			if (t.wrap.querySelector('.pbck-gallery-pagination')) t.wrap.querySelector('.pbck-gallery-pagination').remove();
		}

		return t;
	}
	window.PBCK_gallery = PBCK_gallery;
})(document);

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