/* =========================================================
 * Copyright 2023 Wpbakery
 *
 * WPBakery Page Builder SEO Analysis panel in the navbar
 *
 * ========================================================= */
/* global Backbone, vc, _ */
if (!window.vc) {
	window.vc = {};
}
(function ($) {
	'use strict';

	// Update the Content Analysis panel contents via Backbone View
	vc.SeoAnalysisView = Backbone.View.extend({
		$wpbContentWrapper: null,
		$navbarIcon: null,
		currentBadge: '',
		initialize: function () {
			this.$wpbContentWrapper = this.getContentWrapper();
			this.$navbarIcon = $('#vc_seo-button');
			vc.seo_utils.createMeasurementElement();
			vc.seo_checks.analyzeContent(this.$wpbContentWrapper);
			this.render();
			this.setIconBadge();
			this.setEvents();
		},
		render: function () {
			vc.seo_checks.analyzeContent(this.$wpbContentWrapper);
			var resultsElements = this.getNotificationsHtml();
			this.$el.html(resultsElements);
			this.setIconBadge();
		},
		setEvents: function () {
			this.debouncedRender = _.debounce(this.render, 200);
			this.listenTo(this.model, 'formData', this.debouncedRender);
			var isFrontendEditor = 'admin_frontend_editor' === window.vc_mode;
			if (isFrontendEditor) {
				vc.events.on('afterRender', this.debouncedRender, this);
				vc.events.on('shortcodeView:updated', this.debouncedRender, this);
				vc.events.on('afterLoadShortcode', this.debouncedRender, this);
			} else {
				vc.events.on('shortcodes:update', this.debouncedRender, this);
				vc.events.on('shortcodes:add', this.debouncedRender, this);
				vc.events.on('undoredo:undo', this.debouncedRender, this);
				vc.events.on('undoredo:redo', this.debouncedRender, this);
			}
			vc.events.on('shortcodes:destroy', this.debouncedRender, this);
		},
		getNotificationsHtml: function () {
			var _this = this;
			var results = this.model.get('results');
			var newResults = {
				success: [],
				problems: [],
				warnings: [],
			};
			// Assign each item for corresponding result type
			results.forEach(function (result) {
				newResults[result.state].push(result);
			});
			var resultsElements = [];
			var resultsOrder = ['problems', 'warnings', 'success'];
			var resultsKeys = Object.keys(newResults);
			var sortedKeys = resultsKeys.sort(function (a, b) {
				// Find the index of the names in the customOrder array
				var orderA = resultsOrder.indexOf(a);
				var orderB = resultsOrder.indexOf(b);

				// Compare the order values
				return orderA - orderB;
			});
			sortedKeys.forEach(function (key) {
				if (newResults[key].length) {
					var html = _this.getResultsHtml(key, newResults[key]);
					resultsElements.push(html);
				}
			});
			return resultsElements;
		},
		setIconBadge: function () {
			var state = 'success';
			var allResults = this.model.get('results');
			var getIssue = function (state) {
				return allResults.find(function (result) {
					return state === result.state;
				});
			};
			if (getIssue('problems')) {
				state = 'problems';
			} else if (getIssue('warnings')) {
				state = 'warnings';
			}
			this.$navbarIcon.removeClass(this.currentBadge);
			this.currentBadge = 'vc_ui-badge--' + state;
			this.$navbarIcon.addClass(this.currentBadge);
		},
		getResultsHtml: function (type, data) {
			var $section = $('<div class="vc_ui-seo-results-section"><strong>' + window.i18nLocale[type] + '</strong><ul class="vc_ui-seo-results-list"></ul></div>');
			var $resultList = $section.find('ul');
			$.each(data, function (i, val) {
				var $item = $('<li class="vc_ui-seo-results-list-item vc_ui-seo-results-list-item--' + val.state + '">' + val.title + ': ' + val.description + '</li>');
				$resultList.append($item);
			});
			return $section;
		},
		getContentWrapper: function () {
			return 'admin_frontend_editor' === window.vc_mode ? vc.$frame.contents().find('.wpb-content-wrapper') : $('#wpbakery_content');
		}
	});

	// Initialize SEO Content Analysis Editor
	vc.events.on('app.render', function () {
		// Add timeout to let content render before analyzing it
		setTimeout(function () {
			vc.seo_analysis_view = new vc.SeoAnalysisView({
				el: '#vc_ui-seo-analysis',
				model: vc.seo_storage
			});
		}, 1000);
	});

})(window.jQuery);