// ==UserScript==
// @name         Pegass Helper
// @namespace    https://github.com/Joan/Pegass-Helper
// @version      1.0
// @description  Adds helpful Pegass automations
// @author       Joan
// @match        https://pegass.croix-rouge.fr/*
// @icon         https://www.croix-rouge.fr/apple-touch-icon.png
// @updateURL    https://raw.githubusercontent.com/Joan/Pegass-Helper/main/Pegass-Helper.js
// @supportURL   https://github.com/Joan/Pegass-Helper/issues
// ==/UserScript==

(function() {
	'use strict';
	
	// Inits
	
	const $ = document.querySelector.bind(document),
	      $$ = document.querySelectorAll.bind(document);
	
	/**
	 * Helper button, main screen and CSS
	 * 
	 */
	
	// Add helper button when ready
	
	const check_nav_ready = function() {
		if ($('.main-menu.hidden-phone > ul'))
			add_init_button();
		else {
			setTimeout(check_nav_ready, 500);
		}
	};
	
	const add_init_button = function() {
		const el = document.createElement('li');
		el.classList.add('item', 'align-right');
		el.innerHTML = '<a class="item-link helper-button"><span class="menu-icon"><i class="icon icon-dus"></i></span><span>HELPER</span></a>';
		$('.main-menu.hidden-phone > ul').append(el);
		$('.main-menu.hidden-phone .helper-button').addEventListener('click', e => {
			e.preventDefault();
			display_pegass_helper();
		});
	};

	if (document.readyState !== 'loading')
		check_nav_ready();
	else
		document.addEventListener('DOMContentLoaded', check_nav_ready);
	
	var $pegass_helper;
	
	// Display main screen and CSS
	
	const display_pegass_helper = function() {
		
		const $pegass_helper_css = document.createElement('style');
		$pegass_helper_css.innerHTML = `
			.pegass_helper {
				margin: 20px;
			}
			.pegass_helper form {
				padding: 0;
			}
			.pegass_helper label {
				display: inline-block;
				margin-bottom: 20px;
			}
			.pegass_helper label > span {
				display: block;
				margin-bottom: 5px;
			}
			.pegass_helper input,
			.pegass_helper textarea {
				padding: 6px 8px;
				border: 1px solid #bfbfbf;
			}
			.pegass_helper input,
			.pegass_helper textarea:not([cols]) {
				width: 200px;
			}
			.pegass_helper textarea {
				resize: both;
			}
			.pegass_helper button,
			.pegass_helper input[type="submit"] {
				color: #fff;
				background-color: #E60424;
				border: 0 none;
				padding: 10px 15px;
				margin-bottom: 20px;
			}
			.pegass_helper button:hover,
			.pegass_helper input[type="submit"]:hover {
				background-color: #FC546C
			}
			.pegass_helper button .icon {margin-right: 6px;}
			`.replace(/\n/g, '');
		document.head.appendChild($pegass_helper_css);
		
		$pegass_helper = document.createElement('div');
		const $action_list = document.createElement('ul');
		$pegass_helper.classList.add('pegass_helper');
		$action_list.classList.add('pegass_helper-action_list');
		$pegass_helper.append($action_list);
		
		for (let action in pegass_helper_actions) {
			let $action_button_li = document.createElement('li'),
			    $action_button = document.createElement('button');
			$action_button.innerHTML = `<i class="icon icon-dus"></i> ${pegass_helper_actions[action].name}`;
			$action_button.addEventListener('click', () => {$action_list.remove();});
			$action_button.addEventListener('click', pegass_helper_actions[action].fn);
			$action_button_li.append($action_button);
			$action_list.append($action_button_li);
		}
		
		$('#globalContainer').append($pegass_helper);
		$('#container').style.display = 'none';
		$('.component-menu .main-menu.hidden-phone').style.display = 'none';
		
	};
	
	/**
	 * Misc utils
	 * 
	 */
	
	function array_to_csv(array) { // Array of arrays, no objects
		return array.map(row =>
			row.map(item => {
				// Double `"`
				if (typeof item === 'string' && item.includes('"'))
					item = item.replace(/"/g, '""');
				// Wrap `,` with `"`
				if (typeof item === 'string' && item.includes(','))
					item = `"${item}"`;
				return item;
			}).join(',')
		).join('\n');
	}
	
	/**
	 * Pegass Helper Methods
	 * 
	 */
	
	const pegass_helper_actions = {
		
		/**
		 * Display volunters activities report
		 * 
		 */
		volunteers_activities_report: {
			name: 'Actions annuelles de bénévoles en masse',
			fn: function() {
				
				const $pegass_helper_css = document.createElement('style');
				$pegass_helper_css.innerHTML = `
					.pegass_helper .result {
						display: flex;
						position: relative;
						gap: 50px;
					}
					.pegass_helper .queries_list {
						
					}
					.pegass_helper .queries_list > li {
						
					}
					.pegass_helper .queries_list .nivol {
						font-family: Fira Code, Menlo, monospace;
						display: inline-block;
						width: 8em;
					}
					.pegass_helper .queries_list .progress {
						
					}
					.pegass_helper .result_text {
						position: sticky;
						top: 20px;
						bottom: 20px;
						height: calc(100vh - 200px);
					}
					`.replace(/\n/g, '');
				document.head.appendChild($pegass_helper_css);
				
				$pegass_helper.innerHTML = `
					<form>
						<label>
							<span>Nivols des bénévoles (séparés par une virgule ou retour à la ligne)</span>
							<textarea name="pegass_helper-nivols" id="pegass_helper-nivols" rows="5"></textarea>
						</label><br>
						<label>
							<span>Date de début</span>
							<input type="date" name="pegass_helper-date_start" id="pegass_helper-date_start">
						</label><br>
						<label>
							<span>Date de fin</span>
							<input type="date" name="pegass_helper-date_end" id="pegass_helper-date_end">
						</label><br>
						<input type="submit" value="C'est parti !">
					</form>
					`;
				
				const $form = $pegass_helper.querySelector('form'),
				      $nivols = $pegass_helper.querySelector('#pegass_helper-nivols'),
				      $date_start = $pegass_helper.querySelector('#pegass_helper-date_start'),
				      $date_end = $pegass_helper.querySelector('#pegass_helper-date_end');
				
				$date_start.valueAsDate = new Date(new Date().getFullYear(), 0, 1, 12,0,0,0);
				$date_end.valueAsDate = new Date(new Date().getFullYear(), 11, 31, 12,0,0,0);
				
				const process_data = function(data) {
					
					var formation = 0,
						social = 0,
						secours = 0,
						soutien = 0,
						jeunesse = 0,
						inter = 0;
					
					data.statistiques.forEach(statgroup => {
						switch (statgroup.statistiquesGroupeAction.id) {
							case 1:
								secours += statgroup.statistiquesGroupeAction.nombre;
								break;
							case 2:
								social += statgroup.statistiquesGroupeAction.nombre;
								break;
							case 3:
								soutien += statgroup.statistiquesGroupeAction.nombre;
								break;
							case 10:
								jeunesse += statgroup.statistiquesGroupeAction.nombre;
								break;
							case 14:
							case 16:
								inter += statgroup.statistiquesGroupeAction.nombre;
								break;
							case 17:
								formation += statgroup.statistiquesGroupeAction.nombre;
								break;
						}
					});
					
					return [data.idUtilisateur, formation, social, secours, soutien, jeunesse, inter];
				};
				
				$form.addEventListener('submit', async function(e) {
					
					e.preventDefault();
					
					var nivols = $nivols.value.split(/[,\s\n]+/).filter(str => str.trim() !== '').map(str => str.padStart(12, '0')), // prevent duplicates with "= [...new Set($nivols.value.split…)]"
					    date_start = $date_start.value,
					    date_end = $date_end.value,
					    result_head = ['Nivol', 'Formation', 'AS', 'Secours', 'Soutien aux activités', 'Jeunesse', 'International'],
					    nivols_data = {};
					
					if (nivols.length <= 0) {
						alert('Vous devez indiquer des nivols');
						return;
					}
					
					$pegass_helper.innerHTML = `
						<div class="result">
							<ul class="queries_list"></ul>
							<textarea class="result_text" cols="100">En attente des premiers résultats…</textarea>
						</div>
						`;
					
					const $list = $pegass_helper.querySelector('.pegass_helper .queries_list'),
					      $result = $pegass_helper.querySelector('.pegass_helper .result_text');
					
					nivols.forEach(nivol => {
						const $li = document.createElement('li');
						$li.id = `nivol-${nivol}`;
						$li.innerHTML = `<span class="nivol">${nivol}</span><span class="progress">⏩️</span>`;
						$list.appendChild($li);
					});
					
					var active_requests = new Set(),
						request_promises = [],
						queue = [...nivols],
						max_simultaneous_requests = 20;
					
					const display_results = function() {
						var results = [...nivols];
						results = results.map(nivol =>
							(nivol in nivols_data) ? nivols_data[nivol] : [nivol, '[Données à venir]']
						);
						$result.value = [result_head, ...results].map(row => row.join('\t')).join('\n');
					};
					
					const process_next = async function() {
						
						if (queue.length === 0)
							return Promise.resolve();
						
						const nivol = queue.shift();
						active_requests.add(nivol);
						
						const $el = $pegass_helper.querySelector(`#nivol-${nivol} .progress`);
						$el.textContent = `🔄`;
						
						const request_promise = fetch(`/crf/rest/statistiques/benevole/${nivol}/${date_start}/${date_end}/quantite`)
							.then(async response => {
								if (!response.ok)
									throw new Error(`HTTP error! status: ${response.status}`);
								const data = await response.json();
								$el.textContent = `✅`;
								nivols_data[nivol] = process_data(data);
								display_results();
							})
							.catch(error => {
								console.error('Erreur lors de la requête pour le nivol :', nivol, error);
								$el.textContent = `❎`;
								nivols_data[nivol] = [error];
								display_results();
							})
							.finally(() => {
								active_requests.delete(nivol);
								if (queue.length > 0)
									process_next();
							});
						
						request_promises.push(request_promise);
						return request_promise;
					};

					// Launch first requests
					for (let i = 0, ii = Math.min(max_simultaneous_requests, nivols.length); i < ii; i++)
						process_next();
					
					// After all requests are completed
					
					function iterablePromise(iterable) { // https://stackoverflow.com/a/37819138
						return Promise.all(iterable).then((resolvedIterable) => {
							if (iterable.length != resolvedIterable.length)
								return iterablePromise(iterable);
							return resolvedIterable;
						});
					}
					
					iterablePromise(request_promises).then(() => {
						// All done
					});
					
				});
				
			}
		},
		
		/**
		 * Display volunters activities report
		 * 
		 */
		action_example: {
			name: '[À venir]',
			fn: function() {
				alert('👋');
			}
		}
		
	};
	
	/*
		Script 1

	*/
	
	
	
})();