/**
 * Handles:
 * - Permissions modal -shows when setting user roles.
 *
 * @since 1.8.9
 */

jQuery(document).ready(function($){
/**
 * Permissions modal -shows when setting user roles.
 * use A11yDialog library.
 */

let perms_container = document.getElementById('envira-permissions-dialog-id');
	let perms_dialog = null;
	perms_dialog = new A11yDialog(perms_container);


/**
 * Permissions tab - Select User Roles.
 * - Uses choices JS
 */

	// all the select fields that have this class .envira-permissions-select-field are the permissions fields.

var permissions_select = document.getElementsByClassName('envira-permissions-select-field');

// store the permissions select elements as a constant.
const enviraPermissionsChoices = [];

for (var i = 0; i < permissions_select.length; i++) {
	var current_select = permissions_select[i];
	if (current_select.length > 0) {
		let choices_permissions = current_select.getAttribute('id') + '_select';
		enviraPermissionsChoices[choices_permissions] = new Choices(
			current_select, {
				allowHTML: true,
				searchChoices: false,
				searchEnabled: false,
				removeItemButton: true,
				itemSelectText: '',
				addItemText: '',
				shouldSort: false,
				shouldSortItems: false,
				classNames: {
					containerInner: 'choices__inner roles_inner',
					containerOuter: 'choices roles_inner',
				},
			},
		);

		current_select.addEventListener(
			'addItem',
			function(event) {
				check_envira_permissions($(this).attr('id'), event.detail.value, event.detail.label, 'add');
				disable_administrator();
			},
			false,
		);

		current_select.addEventListener(
			'removeItem',
			function(event) {
				check_envira_permissions($(this).attr('id'), event.detail.value, event.detail.label, 'remove');
				disable_administrator();
			},
			false,
		);
	}
}

	// find all choices that has 'administrator' as a value and disable it.

	function disable_administrator() {
		$('.choices__item').each(function() {
			if($(this).attr('data-value') === "administrator"){
				$(this).removeClass('choices__item--selectable');
				$(this).removeAttr('data-deletable');
				$(this).removeAttr('data-item');
				$(this).addClass('demos');
				$(this).off('click');
			}
		});

		$('.choices__button').each(function() {
			if($(this).attr('aria-label') === "Remove item: '\administrator\'"){
				$(this).hide();
			}
		});
	}


	disable_administrator();

function check_envira_permissions(element, value, label, type) {
	if (!enviraPermissions || !enviraPermissions.hasOwnProperty(element)) {
		return;
	}
	// get other elements value and see if it is already selected.
	var permissionLabel = enviraPermissionsLabels[element];
	var other_elements = enviraPermissions[element];
	let choices_permissions = element + '_select';
	let reqPermissionLabel = get_envira_permissions(other_elements, type, value);
	reqPermissionLabel = reqPermissionLabel.filter(function(item) {
		return item !== permissionLabel;
	});
	let message = '';
	let permission_text = reqPermissionLabel.length > 1 ? 'permissions' : 'permission'

	if (type === 'add') {
		message = `<p>In order to give <strong>${permissionLabel}</strong> permission,
				<strong>${reqPermissionLabel}</strong> ${permission_text} ${reqPermissionLabel.length > 1 ? 'are' : 'is'} also required.</p>`;
		message += `<p>Would you like to also grant <strong>${reqPermissionLabel}</strong> ${permission_text} to ${label}?</p>`;
	} else {
		message = `<p>In order to remove <strong>${permissionLabel}</strong> permission,
				<strong>${reqPermissionLabel}</strong> ${permission_text} will also be removed.</p>`;
		message += `<p>Would you like to also remove <strong>${reqPermissionLabel}</strong> ${permission_text} to <strong>${label}</strong>?</p>`;
	}

	if(reqPermissionLabel.length > 0){
		$('#envira-permissions-alert').html(message);
		perms_dialog.show();
		$('.envira-permissions-yes').on('click', function() {
			update_envira_permissions(other_elements, value, type);
			perms_dialog.hide();
		});
		$('.envira-permissions-cancel').on('click', function() {
			if (type === 'add') {
				enviraPermissionsChoices[choices_permissions].removeActiveItemsByValue(value);
			}
			if (type === 'remove') {
				enviraPermissionsChoices[choices_permissions].setChoiceByValue(value);
			}
			perms_dialog.hide();
		});
	}else{
		update_envira_permissions(other_elements, value, type);
	}
	// Hide the choices after the dialog is closed.
	setTimeout(() => enviraPermissionsChoices[choices_permissions].hideDropdown(), 0);
}


function update_envira_permissions(elements, value, type) {

	for (var i = 0; i < elements.length; i++) {
		let element = elements[i];

		// Select the dropdown element
		let selectElement = document.querySelector('#' + element);

		// Get all selected options
		let selectedOptions = selectElement.selectedOptions;

		// Initialize an array to store the selected values
		let selectedValues = [];

		var choices_permissions = element + '_select';
		let reqPermissionLabel = enviraPermissionsLabels[element];
		// Loop through all selected options and get their values
		for (let option of selectedOptions) {
			selectedValues.push(option.value);
		}

		let key = Object.keys(enviraPermissionsLabels).find(key => enviraPermissionsLabels[key] === reqPermissionLabel);
		let currentPermission = enviraPermissionsChoices[key + '_select'];
		// check if the value is in the selected values array.
		if (type === 'add') {
			if (selectedValues.indexOf(value) === -1) {
				selectedValues.push(value);
				currentPermission.setChoiceByValue(value);
			}
		} else {
			if (selectedValues.indexOf(value) !== -1) {
				selectedValues = selectedValues.filter(function(item) {
					return item !== value;
				});
				currentPermission.removeActiveItemsByValue(value);
			}
		}
	}
}

function get_envira_permissions(elements, type, value) {

	var reqPermissionLabel = [];

	for (var i = 0; i < elements.length; i++) {

		let element = elements[i];

		// Select the dropdown element
		let selectElement = document.querySelector('#' + element);

		// Get all selected options
		let selectedOptions = selectElement.selectedOptions;

		// Initialize an array to store the selected values
		let selectedValues = [];

		// Loop through all selected options and get their values
		for(let option of selectedOptions){
			selectedValues.push(option.value);
		}

		if (type === 'add') {
			if (selectedValues.indexOf(value) === -1) {
				selectedValues.push(value);
				reqPermissionLabel.push(enviraPermissionsLabels[element]);
			}
		} else {
			if (selectedValues.indexOf(value) !== -1) {
				selectedValues = selectedValues.filter(function(item) {
					return item !== value;
				});
				reqPermissionLabel = reqPermissionLabel.filter(function(item) {
					return item !== enviraPermissionsLabels[element];
				});
			}
		}
	}

	return reqPermissionLabel;

}

});