/**
 * AI Contents Generator
 * 
 * @package JMAP::AIGENERATOR::administrator::components::com_jmap 
 * @subpackage js 
 * @author Joomla! Extensions Store
 * @copyright (C) 2021 Joomla! Extensions Store
 * @license GNU/GPLv2 http://www.gnu.org/licenses/gpl-2.0.html  
*/
(function($) {
	var AIContentGenerator = function () {
		/**
		 * Timeout of the closer for popup
		 * 
		 * @access private
		 * @var String
		 */
		var timeoutCloser = null;
		
		/**
		 * Open AI Generator progress bar
		 * 
		 * @access private
		 * @return void 
		 */
		var openAIGeneratorProgress = function() {
			// Show first progress
			var firstProgress = '<div class="progress progress-striped active">' +
									'<div id="progressbar_aigenerator" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">' +
										'<span class="sr-only"></span>' +
									'</div>' +
								'</div>';
			
			// Build modal dialog
			var modalDialog =	'<div class="modal fade" id="aigenerator_process" tabindex="-1" role="dialog" aria-labelledby="progressModal" aria-hidden="true">' +
									'<div class="modal-dialog">' +
										'<div class="modal-content">' +
											'<div class="modal-header">' +
								        		'<h4 class="modal-title">' + COM_JMAP_PROGRESSAIGENERATORTITLE + '</h4>' +
								        		'<label class="closeaigenerator glyphicon glyphicon-remove-circle"></label>' +
							        		'</div>' +
							        		'<div class="modal-body">' +
								        		'<p>' + firstProgress + '</p>' +
								        		'<p id="progressInfo1"></p>' +
							        		'</div>' +
							        		'<div class="modal-footer">' +
								        	'</div>' +
							        	'</div><!-- /.modal-content -->' +
						        	'</div><!-- /.modal-dialog -->' +
						        '</div>';
			// Inject elements into content body
			$('body').append(modalDialog);
			
			var modalOptions = {
					backdrop:'static'
				};
			$('#aigenerator_process').on('shown.bs.modal', function(event) {
				$('#aigenerator_process div.modal-body').css({'width':'90%', 'margin':'auto'});
				$('#progressbar_aigenerator').css({'width':'100%'});
				// Inform user process initializing
				$('#progressInfo1').empty().append(COM_JMAP_PROGRESSAIGENERATORSUBTITLE);
			});
			
			$('#aigenerator_process').modal(modalOptions);
		};
		
		/**
		 * Open first operation progress bar
		 * 
		 * @access private
		 * @param String ajaxLink
		 * @return void 
		 */
		var openCreateContentProgress = function(contentType, scope) {
			// Show first progress
			var titleOfContent = contentType == 'article' ? COM_JMAP_PROGRESSAIGENERATOR_ARTICLE_CREATION_TITLE : COM_JMAP_PROGRESSAIGENERATOR_MODULE_CREATION_TITLE;
			var firstProgress = '<div class="progress">' +
									'<div id="progressbar_aigenerator_createcontent" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">' +
									'</div>' +
								'</div>';
			
			// Build modal dialog
			var modalDialog =	'<div class="jmapmodal modal fade" id="progressAiGeneratorCreateContentModal" tabindex="-1" role="dialog" aria-labelledby="progressModal" aria-hidden="true">' +
									'<div class="modal-dialog">' +
										'<div class="modal-content">' +
											'<div class="modal-header">' +
								        		'<h4 class="modal-title">' + titleOfContent + '</h4>' +
								        		'<label class="close-ai-content-creation closeprecaching glyphicon glyphicon-remove-circle"></label>' +
							        		'</div>' +
							        		'<div class="modal-body">' +
								        		'<p>' + firstProgress + '</p>' +
								        		'<p id="progressInfoContentLine"></p>' +
							        		'</div>' +
							        		'<div class="modal-footer">' +
								        	'</div>' +
							        	'</div><!-- /.modal-content -->' +
						        	'</div><!-- /.modal-dialog -->' +
						        '</div>';
			// Inject elements into content body
			$('body').append(modalDialog);
			// Remove fancybox overlay if added cronjob link
			$('div.fancybox-overlay').fadeOut();
			
			var modalOptions = {
					backdrop:'static'
				};
			$('#progressAiGeneratorCreateContentModal').modal(modalOptions);
			
			$('#progressAiGeneratorCreateContentModal').on('shown.bs.modal', function(event) {
				$('#progressAiGeneratorCreateContentModal div.modal-body').css({'width':'95%', 'margin':'auto'});
				$('#progressbar_aigenerator_createcontent').css({'width':'50%'});
				// Inform user process initializing
				var subtitleOfContent = contentType == 'article' ? COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_SUBTITLE_ARTICLE : COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_SUBTITLE_MODULE;
				$('#progressInfoContentLine').empty().append('<p class="aigenerator-process-message">' + subtitleOfContent + '</p>');
				
				setTimeout(function(){
					modelSaveEntity(contentType, scope).always(function(responseData){
						// Always remove the processing message
						$('p.aigenerator-process-message').remove();
						if(responseData.result) {
							// Set 100% for progress
							$('#progressbar_aigenerator_createcontent').css({'width':'100%'}).removeClass('progress-bar-striped progress-bar-animated').addClass('progress-bar-success');
							// Append complete message
							if(contentType == 'article') {
								$('#progressInfoContentLine').append('<p>' + COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_SUBTITLE_ARTICLE_SUCCESS + '<a target="_blank" href="index.php?option=com_content&task=article.edit&id=' + responseData.content_id + '" class="label label-secondary">' + COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_EDIT_ARTICLE + '</a></p>');
							} else {
								$('#progressInfoContentLine').append('<p>' + COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_SUBTITLE_MODULE_SUCCESS + '<a target="_blank" href="index.php?option=com_modules&task=module.edit&id=' + responseData.content_id + '" class="label label-secondary">' + COM_JMAP_PROGRESSAIGENERATOR_CONTENT_CREATION_EDIT_MODULE + '</a></p>');
							}
						} else {
							// Set 100% for progress
							$('#progressbar_aigenerator_createcontent').css({'width':'100%'}).removeClass('progress-bar-striped progress-bar-animated').addClass('progress-bar-danger');
							// Append exit message
							if(contentType == 'article') {
								$('#progressInfoContentLine').append('<p>' + COM_JMAP_PROGRESSAIGENERATOR_ARTICLE_CREATION_ERROR + '<span class="label label-danger">' + responseData.exception_message + '</span></p>');
							} else {
								$('#progressInfoContentLine').append('<p>' + COM_JMAP_PROGRESSAIGENERATOR_MODULE_CREATION_ERROR + '<span class="label label-danger">' + responseData.exception_message + '</span></p>');
							}
							timeoutCloser = setTimeout(function(){
								// Remove all
								$('#progressAiGeneratorCreateContentModal').modal('hide');
							}, 3000);
						}
					});
				}, 500);
			});
			
			// Remove backdrop after removing DOM modal
			$('#progressAiGeneratorCreateContentModal').on('hidden.bs.modal', function(event) {
				$('.modal-backdrop').remove();
				$(this).remove();
				// Recover fancybox overlay if added cronjob link
				$('div.fancybox-overlay').fadeIn();
				// Reset the timeout
				clearTimeout(timeoutCloser);
			});
		};
		
		/**
		 * Register user events for interface controls
		 * 
		 * @access private
		 * @param Boolean initialize
		 * @return Void
		 */
		var addListeners = function(initialize) {
			// Append a dialog for the audit tool
			$('#jform_api label.radio:not(.active),#jform_removeimgs label.radio:not(.active),#generatebutton').on('click.aigenerator', function(jqEvent){
				if($(jqEvent.target).is('input') || $(jqEvent.target).is('a')) {
					$('#toolbar-cogs button').trigger('click');
				}
			});
			
			// Support for copy Clipoard buttons, new API and legacy API
			if(navigator.clipboard) {
				$(document).on('click', '#accordion_aigenerator_contents_results div.panel-heading.hasPopover', function(jqEvent){
					var context = $(this);
					var snippetTitle = $('h4', context).text().trim();
					if (window.event.ctrlKey) {
						var snippetDescription = context.nextAll('div.panel-body').html().trim();
					} else {
						var snippetDescription = context.nextAll('div.panel-body').text().trim();
					}
					
					navigator.clipboard.writeText(snippetTitle + ' - ' + snippetDescription)
					.then(function() {
						$('h4',context).tooltip({
							trigger : 'click', 
							placement : 'bottom',
							title : COM_JMAP_AIGENERATOR_COPIED_CONTENT
						}).tooltip('show');
						
						setTimeout(function(){
							$('h4',context).tooltip('destroy');
						}, 2000);
					})
					.catch(function(err) {
						var error = err;
					});
					return false;
				});
			}
			
			// Live event binding only once on initialize, avoid repeated handlers and executed callbacks
			if(initialize) {
				// Live event binding for close button AKA stop process
				$(document).on('click.aigenerator', 'label.closeaigenerator', function(jqEvent){
					$('#aigenerator_process').modal('hide');
					window.stop();
				});
				
				// Live event binding for close button AKA stop process
				$(document).on('click.aigenerator', 'label.close-ai-content-creation', function(jqEvent){
					$('#progressAiGeneratorCreateContentModal').modal('hide');
				});
				
				// Add content creation events
				$('button.create-article').on('click', function(){
					let scope = $(this).parents('div.panel.text-black.bg-light');
					openCreateContentProgress('article', scope);
				});
				$('button.create-module').on('click', function(){
					let scope = $(this).parents('div.panel.text-black.bg-light');
					openCreateContentProgress('module', scope);
				});
			}
		};
		
		/**
		 * Re-process images to ensure that at least a src is available
		 * 
		 * @access private
		 * @param Boolean initialize
		 * @return Void
		 */
		var reProcessImagesSrc = function(initialize) {
			var imgNodes = $('#contents_results div.panel img');
			imgNodes.each(function(index, img){
				var imgNode = $(img);
				var hasASrc = img.hasAttribute('src') || img.hasAttribute('srcset');
				
				// The img is orphan, check if there is a data attribute to resume
				if(!hasASrc || imgNode.attr('src') == 'src') {
					var dataAttributes = ['data-src', 'data-original', 'data-lazyload', 'data-dt-lazy-src', 'data-lazy-src', 'data-noloadsrcset'];
					$.each(dataAttributes, function(index, dataAttribute){
						var dataValue = imgNode.attr(dataAttribute);
						if(dataValue) {
							if(dataAttribute != 'data-noloadsrcset') {
								imgNode.attr('src', dataValue);
							} else {
								imgNode.attr('srcset', dataValue);
							}
						}
					});
				}
			});
		};
		
		/**
		 * Switch ajax submit form to model business logic
		 * 
		 * @access private
		 * @param String ajaxLink
		 * @return Promise
		 */
		var modelSaveEntity = function(contentType, scope) {
			var contentTitle = $('div.panel-heading h4', scope).text().trim();
			var contentBody = $('div.panel-body', scope).html().trim();
			var contentLanguage = $('#aigenerator_language option:selected').data('languagecode') || '*';
			
			// Consider the default language selection as the language 'ALL' case
			var contentLanguageIndex = $('#aigenerator_language option:selected').index();
			if(contentLanguageIndex == 0){
				contentLanguage = '*';
			}
			
			// Extra object to send to server
			var ajaxParams = { 
					idtask : 'aigeneratorContentCreate',
					template : 'json',
					param: {
						type: contentType,
						title: contentTitle,
						body: contentBody,
						language: contentLanguage
					}
			     };
			// Unique param 'data'
			var uniqueParam = JSON.stringify(ajaxParams); 

			// Request JSON2JSON
			return $.ajax({
		        type: "POST",
		        url: "../administrator/index.php?option=com_jmap&task=ajaxserver.display&format=json",
		        dataType: 'json',
		        context: this,
		        async: true,
		        data: {data : uniqueParam } , 
		        success: function(data, textStatus, jqXHR)  {
	            },
				error: function(jqXHR, textStatus, error){
					// Append error details
					$('#progressInfoContentLine').append('<p>' + error + '</p>');
				}
			}); 
		};
		
		/**
		 * Public interface to the contents generator
		 * 
		 * @access public
		 * @return Void
		 */
		this.openProgressContentGeneration = function() {
			// Start first progress appending
			openAIGeneratorProgress();
		};
		
		/**
		 * Function dummy constructor
		 * 
		 * @access private
		 * @param String
		 *            contextSelector
		 * @method <<IIFE>>
		 * @return Void
		 */
		(function __construct() {
			// Add UI events
			addListeners.call(this, true);
			
			// Show/hide params for the generator API
			var generatorAPISelected = $('input[name=api]:checked').val();
			if(generatorAPISelected != 'openai') {
				$('tr.openai-params').hide();
			} else {
				$('tr.openai-params').show();
			}
			
			// Re-process images to ensure that at least a src is available
			reProcessImagesSrc();
			
			// Add class to broadcast button
			$('.icon-cogs').parent().addClass('btn-primary');
		}).call(this);
		
	};
	
	// On DOM Ready
	$(function() {
		window.JMapAIContentGenerator = new AIContentGenerator();
	});
})(jQuery);