{strip}
{if !isset($classLabel)}
	{assign var=classLabel value="default_params_label"}
{/if}
{if !isset($classInput)}
	{assign var=classInput value="default_params_input"}
{/if}
{assign var=type value="all"}
{if isset($plugin_name)}
	{if preg_match("/_INTER/i", $plugin_name)}
		{$type = "interface"}
	{/if}
{/if}
<script>
	{literal}
	(() => {
	{/literal}
		let htmlId = '{$htmlid}';
		let paramId = '{$html_params_id}';
	{literal}

		const setSelectPluginUse = async(select, pluginId, eltType, groupId=[], nodeId=[]) => {
			await $.ajax({
				type: 'GET',
				url: '/display_core.php',
				data: { type: 'plugin', action: 'getPluginUseElt', eltType: eltType, plugin: pluginId, groupId: JSON.stringify(groupId), nodeId: JSON.stringify(nodeId) },
				dataType: 'json',
			})
			.done(data => {
				if(data?.ERROR)
				{
					console.error(data.ERROR);
				}
				else
				{
					const oldData = select.getSelected().map(val => parseInt(val));
					if(eltType === 'groups')
					{
						select.setData(data.map(group => ({
							text: group.path,
							value: group.id,
							selected: (oldData.includes(group.id)) ? true : false,
						})));
					}
					else if(eltType === 'nodes')
					{
						select.setData(data.map(elt => ({
							text: elt.name,
							value: elt.id,
							selected: (oldData.includes(elt.id)) ? true : false,
						})));
					}
					else if(eltType === 'services')
					{
						select.setData(data.map(elt => ({
							text: elt.device_name + ' > ' + elt.common_name,
							value: elt.id,
							selected: (oldData.includes(elt.id)) ? true : false,
						})));
					}
				}
			})
			.fail(jqXHR => {
				console.error('AJAX request failed: ' + jqXHR.responseText);
			});
		}
		const getPluginIdByRrd = async(rrdId) => {
			let pluginId = null;
			await $.ajax({
				type: 'GET',
				url: '/display_core.php',
				data: { type: 'plugin', action: 'getPluginByRRD', rrdId: rrdId },
				dataType: 'json',
			})
			.done(data => {
				if(data?.ERROR)
				{
					console.error(data.ERROR);
				}
				else
				{
					pluginId = data.plugin_id;
				}
			})
			.fail(jqXHR => {
				console.error('AJAX request failed: ' + jqXHR.responseText);
			});

			return pluginId;
		}
		const getServiceParentsIds = async(serviceIds) => {
			let lists = { groups: [], nodes: [] };
			await $.ajax({
				type: 'GET',
				url: '/display_core.php',
				data: { type: 'plugin', action: 'getServiceParentsIds', serviceIds: JSON.stringify(serviceIds) },
				dataType: 'json',
			})
			.done(data => {
				if(data?.ERROR)
				{
					console.error(data.ERROR);
				}
				else
				{
					lists = data;
				}
			})
			.fail(jqXHR => {
				console.error('AJAX request failed: ' + jqXHR.responseText);
			});

			return lists;
		}

		const matchAll = '[^\\s-]*';
		$(window).on('load', async function() {
			let paramInput = $('#' + paramId);
			let param = paramInput.val();
			let result = null;
			let pluginRRDList = [];
			let pluginId = 0;
			let initialValues = {
				plugin: null,
				rrd: null,
				group: null,
				node: null,
				service: null,
			};

			// Get initial param operation -o
			result = param.match(/\-o\s+(sum|diff)/i);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-operation').val(result[1]);
			}
			// Get initial param services -s
			result = param.match(/\-s\s+([0-9\,]+)/);
			if(result !== null)
			{
				initialValues.service = result[1].split(',').map(id => parseInt(id));
				const servicesParents = await getServiceParentsIds(initialValues.service);
				initialValues.group = servicesParents.groups;
				initialValues.node = servicesParents.nodes;
			}

	{/literal}
		{if $type === "interface"}
	{literal}
			pluginId = 'INTERFACE';
	{/literal}
		{else}
	{literal}
			// Get initial param RRD -r
			result = param.match(/\-r\s+([0-9]*)/);
			if(result !== null)
			{
				// Get plugin from rrd id and save both values to use them when the plugin select values will be loaded
				initialValues.plugin = await getPluginIdByRrd(result[1]);
				initialValues.rrd = result[1];
			}

			// Input plugin
			const selectPlugin = new SlimSelect({
				select: '#plug-' + htmlId + '-input-plugin',
				settings: { showSearch: true },
				events: {
					afterChange: async elt => {
						pluginId = elt[0].value; // Global

						const rrdList = pluginRRDList[pluginId].rrd_list || [];
						selectRrd.setData(rrdList.map(rrd => ({ text: rrd.rrd_name, value: rrd.rrd_id })));
						// Clean selects group to avoid bug. Cleaning groups will trigger the cleaning on nodes & then services
						selectGroups.setData([]);
						await setSelectPluginUse(selectGroups, pluginId, 'groups', [], []);
						// Initial values of rrd select and groups
						if(initialValues.rrd)
						{
							selectRrd.setSelected(initialValues.rrd);
							initialValues.rrd = null;
						}
						if(initialValues.group)
						{
							selectGroups.setSelected(initialValues.group);
							initialValues.group = null;
						}
					},
				},
			});

			// RRD value -r
			const selectRrd = new SlimSelect({
				select: '#plug-' + htmlId + '-param-rrd',
				settings: { showSearch: true },
				events: {
					afterChange: elt => {
						eui_plugins.addOrReplaceParameter(paramInput, '-r', matchAll, elt[0].value);
					},
				},
			});

			// Get all used plugins and rrd values
			$.ajax({
				type: 'GET',
				url: '/display_core.php',
				data: { type: 'plugin', action: 'getUsedPluginsRRD' },
				dataType: 'json',
			})
			.done(data => {
				if(data?.ERROR)
				{
					console.error(data.ERROR);
				}
				else
				{
					let pluginFormatted = [];
					data.forEach((plug, order) => {
						pluginRRDList[plug.id] = plug; // Don't keep plugin list order but save it by plugin id key into global pluginRRDList
						pluginFormatted[order] = { text: plug.name, value: plug.id }; // Keep order and format for slim select data
					});
					selectPlugin.setData(pluginFormatted);
					// Initial values of plugin select
					if(initialValues.plugin)
					{
						selectPlugin.setSelected(initialValues.plugin);
						initialValues.plugin = null;
					}
				}
			})
			.fail(jqXHR => {
				console.error('AJAX request failed: ' + jqXHR.responseText);
			});

	{/literal}
		{/if}
	{literal}
			// Operation -o
			new SlimSelect({
				select: '#plug-' + htmlId + '-param-operation',
				settings: { showSearch: false },
				events: {
					afterChange: elt => {
						eui_plugins.addOrReplaceParameter(paramInput, '-o', matchAll, elt[0].value);
					},
				},
			});

			// Alert & critical from default_warning_critical.html

			// Nodes groups, groups & services multi-selects
			const selectGroups = new SlimSelect({
				select: '#plug-' + htmlId + '-input-groupNode',
				settings: { showSearch: true, allowDeselect: true },
				events: {
					afterOpen: () => {
						Utils.slimSelectKeepOpen(selectGroups);
					},
					afterChange: async elt => {
						if(elt[0])
						{
							selectNodes.enable();
							const values = elt.map(e => e.value);
							await setSelectPluginUse(selectNodes, pluginId, 'nodes', values, []);
							// Initial values of nodes select
							if(initialValues.node)
							{
								selectNodes.setSelected(initialValues.node);
								initialValues.node = null;
							}
						}
						else
						{
							// Clean nodes select on empty group (will also trigger empty services)
							selectNodes.setData([]);
							selectNodes.disable();
						}
					},
				},
			});
			const selectNodes = new SlimSelect({
				select: '#plug-' + htmlId + '-input-node',
				settings: { showSearch: true, allowDeselect: true, disabled: true },
				events: {
					afterOpen: () => {
						Utils.slimSelectKeepOpen(selectNodes);
					},
					afterChange: async elt => {
						if(elt[0])
						{
							selectServices.enable();
							const values = elt.map(e => e.value);
							await setSelectPluginUse(selectServices, pluginId, 'services', [], values);
							// Initial values of services select
							if(initialValues.service)
							{
								selectServices.setSelected(initialValues.service);
								// Remove initial vlaues after order
							}
						}
						else
						{
							// Clean services select on empty node
							selectServices.setData([]);
							selectServices.disable();
						}
					},
				},
			});
			const selectServices = new SlimSelect({
				select: '#plug-' + htmlId + '-input-service',
				settings: { showSearch: true, allowDeselect: true, disabled: true },
				events: {
					afterOpen: () => {
						Utils.slimSelectKeepOpen(selectServices);
					},
					afterChange: elt => {
						const orderServices = $('#plug-' + htmlId + '-order-service');
						if(elt[0])
						{
							orderServices.sortable('enable');
							orderServices.find('li.order-placeholder').hide();
							if(initialValues.service)
							{
								// Append initial values by order
								initialValues.service.forEach(val => {
									for(const newElt of elt) { // forEach but can be break by return
										if(newElt.value == val)
										{
											orderServices.append('<li id="' + newElt.value + '"><span>' + newElt.text + '</span></li>');
											return;
										}
									}
								});
								initialValues.service = null;
							}
							else
							{
								// Check if add or removed service
								const countOrder = orderServices.find('li:not(.order-placeholder)').length;
								const countSelected = elt.length;
								if(countSelected > countOrder)
								{
									// Add one
									const newElt = elt[countSelected - 1];
									orderServices.append('<li id="' + newElt.value + '"><span>' + newElt.text + '</span></li>');
								}
								else
								{
									// Remove one
									const values = elt.map(e => e.value);
									orderServices.find('li:not(.order-placeholder)').each(function() {
										if(!values.includes(parseInt($(this).attr('id'))))
										{
											$(this).remove();
										}
									});
								}
							}
						}
						else
						{
							// Remove all. Clean order section
							orderServices.find('li:not(.order-placeholder)').remove();
							orderServices.find('li.order-placeholder').show();
							orderServices.sortable('disable');
						}
						orderServices.trigger('sortupdate');
					},
				},
			});

			// Service order & input hidden service -s
			$('#plug-' + htmlId + '-order-service').sortable({ axis: 'y', disabled: true });
			$('#plug-' + htmlId + '-order-service').on('sortupdate', function() {
				let values = $(this).sortable('toArray').filter(val => val > 0); // Remove the value of the placeholder item id="0"
				if(values.length === 0)
				{
					values = ['<serviceid1,serviceid2>'];
				}
				$('#plug-' + htmlId + '-param-service').val(values.join(',')).trigger('change');
			});

			$('#plug-' + htmlId + '-param-service').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-s', matchAll, this.value);
			});

			// Init group select for interface plugin type
			if(pluginId === 'INTERFACE')
			{
				await setSelectPluginUse(selectGroups, pluginId, 'groups', [], []);
				// Initial values of groups
				if(initialValues.group)
				{
					selectGroups.setSelected(initialValues.group);
					initialValues.group = null;
				}
			}
		});
	})();
	{/literal}
</script>
<p class="info">{$lang.OPERATION_ORDER_INFO}</p>
<div class="pluginFlexCol">
	<div class="pluginFlexCol-section">
		{if $type !== "interface"}
			<div class="default_params_container">
				<label for="plug-{$htmlid}-input-plugin" class="{$classLabel}">{$lang.PLUGIN}</label>
				<select id="plug-{$htmlid}-input-plugin" name="plug-{$htmlid}-input-plugin" class="{$classInput} paramPluginSelect selectLargeValues">
				</select>
			</div>
			<div class="default_params_container">
				<label for="plug-{$htmlid}-param-rrd" class="{$classLabel}">{$lang.VALUE}</label>
				<select id="plug-{$htmlid}-param-rrd" name="plug-{$htmlid}-param-rrd" class="{$classInput}">
				</select>
			</div>
		{/if}
		<div class="default_params_container">
			<label for="plug-{$htmlid}-param-operation" class="{$classLabel}">{$lang.OPERATION}</label>
			<select id="plug-{$htmlid}-param-operation" name="plug-{$htmlid}-param-operation" class="{$classInput}">
				<option value="SUM">{$lang.OPERATION_SUM}</option>
				<option value="DIFF">{$lang.OPERATION_DIFF}</option>
			</select>
		</div>
		{include
			file="{$smarty.current_dir}/default_warning_critical.html"
			action='modif'
			htmlid=$htmlid
			html_params_id=$html_params_id
			unity=''
			lang=$lang
		}
	</div>
	<div class="pluginFlexCol-section sectionSelectService">
		<div class="default_params_container param-multiSelect paramSelectGroup">
			<label for="plug-{$htmlid}-input-groupNode" class="{$classLabel}">{$lang.ADM_NODE_GROUP}</label>
			<select id="plug-{$htmlid}-input-groupNode" name="plug-{$htmlid}-input-groupNode[]" class="{$classInput} selectLargeValues" multiple="multiple">
				<option value=""></option>
			</select>
		</div>
		<div class="default_params_container param-multiSelect">
			<label for="plug-{$htmlid}-input-node" class="{$classLabel}">{$lang.NODES}</label>
			<select id="plug-{$htmlid}-input-node" name="plug-{$htmlid}-input-node[]" class="{$classInput} selectLargeValues" multiple="multiple">
				<option value=""></option>
			</select>
		</div>
		<div class="default_params_container param-multiSelect">
			<label for="plug-{$htmlid}-input-service" class="{$classLabel}">{$lang.SERVICES}</label>
			<select id="plug-{$htmlid}-input-service" name="plug-{$htmlid}-input-service" class="{$classInput} selectLargeValues" multiple="multiple">
				<option value=""></option>
			</select>
		</div>
	</div>
	<div class="pluginFlexCol-section serviceOrder">
		<span class="serviceOrderTitle">{$lang.OPERATION_ORDER}</span>
		<ul id="plug-{$htmlid}-order-service" class="order-select">
			<li class="order-placeholder" id="0">
				<span></span>
			</li>
		</ul>
		<input type="hidden" id="plug-{$htmlid}-param-service" name="plug-{$htmlid}-param-service" value=""/>
	</div>
</div>
{/strip}
<style>
	.pluginFlexCol {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		gap: 10px 30px;
		margin-bottom: 2px;
	}
	.pluginFlexCol-section {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 1.333334em;
	}
	.pluginFlexCol-section > * {
		flex: 0 0 auto;
	}
	.pluginFlexCol-section.serviceOrder {
		margin-top: 0;
		flex-shrink: 1;
	}
	.serviceOrderTitle {
		display: block;
		margin-top: 2px;
	}
	.order-select {
		overflow: auto;
		list-style: none;
	}
	.order-select li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		min-height: 31px;
		max-height: 60px;
		min-width: 300px;
		margin-top: 2px;
		margin-bottom: 4px;
		padding: 4px 10px 4px 45px;
		cursor: grab;
		background-image: url("/theme/default/images/move.png");
		background-repeat: no-repeat;
		background-position: center left 5px;
		background-color: var(--cBgHeadings);
		overflow: auto;
	}
	.order-select li.order-placeholder {
		cursor: not-allowed;
	}
	.sectionSelectService select {
		width: 300px;
	}
	.info {
		margin: 6px 0;
	}
	.pluginFlexCol .default_params_label {
		width: 80px;
	}
	.pluginFlexCol .default_params_input {
		width: 250px;
	}
	.paramPluginSelect {
		font-size: .833333333em;
	}
	.param-multiSelect label {
		align-self: baseline;
		margin-top: .6em;
	}
	.param-multiSelect.paramSelectGroup label {
		margin-top: .1em;
	}
	.selectLargeValues.ss-main .ss-value-text,
	.selectLargeValues.ss-main .ss-single,
	.selectLargeValues.ss-content .ss-option,
	.order-select li span {
		overflow-wrap: anywhere;
	}
</style>