// ROUTING FUNCTIONS

// Convert date from DD MON YYYY to YYYYMMDD
function getDate() {
	const dict = {
		'Jan': '01',
		'Feb': '02',
		'Mar': '03', 
		'Apr': '04', 
		'May': '05', 
		'Jun': '06',
		'Jul': '07', 
		'Aug': '08', 
		'Sep': '09', 
		'Oct': '10', 
		'Nov': '11', 
		'Dec': '12'
	};
 	date = document.getElementById('date').value;
	splitDate = date.split(' ');
	month = dict[splitDate[1]];
	return 'date=' + splitDate[2] + month + splitDate[0];
}

// Send the URL to the CMS
function sendURL(url) {
    window.history.pushState("URL from Dashboard", "", url);
    parent.postMessage(url, '*');
}

// GET THE VALUE SELECTED IN DROPDOWN MENU
function getDropdownValue(selector, key) {
	curvar = document.querySelector(selector).innerHTML;
	curvar = curvar.split(' ').join('_')
	//CREATE KEY/VALUE OUTPUT FOR URL SEACH QUERY FORMAT (EX. FRUIT=APPLE)
	return key + '=' + curvar.toLowerCase();	
}

// GET CHECK BOXES CHECKED
function getCheckedBoxes(selector, key){
    const data = [...document.querySelectorAll(selector)].map(e => e.value);
    data.forEach(function(item, index){
	//CREATE KEY/VALUE OUTPUT FOR URL SEACH QUERY FORMAT (EX. FRUIT=APPLE)
	this[index] = key + '=' + item
    }, data);		
    return data.join('&');
}

// CREATE URL WHEN MODELS-APPLY IS CLICKED
function handleModelsApply () {
	curvar = getDropdownValue('.Select-value-label', 'var')
	models = getCheckedBoxes('.form-check-input:checked', 'model')
	outputDate = getDate();
	url = "?" + curvar + '&' + models + '&' + outputDate;
	sendURL(url);
    };

// CREATE URL WHEN MODELS-APPLY IS CLICKED
function handleWASApply () {
	const checked = document.getElementById('was-dropdown');
	var text = checked.querySelector('input[type="radio"]:checked').parentElement.innerText;
	text = text.split(' ').join('_').toLowerCase();
	url = "?tab=forecast&section=was&country=" + text;
	sendURL(url);
    };	

// CREATE A DICTIONARY OF IDs TO CREATE URL OUTPUTS
const urlOuputDict = {
    "#group-1-toggle": "?tab=forecast&section=models",
    "#group-2-toggle": "?tab=forecast&section=prob",
    "#group-3-toggle": "?tab=forecast&section=was",
    "#forecast-tab": "?tab=forecast",
    "#evaluation-tab": "?tab=evaluation",
    "#observations-tab": "?tab=observations",
    "#nrt-evaluation": "?tab=evaluation&section=visual_comparison",
    "#scores-evaluation": "?tab=evaluation&section=statistics",
    "#rgb": "?tab=observations&section=eumetsat-rgb",
    "#visibility": "?tab=observations&section=visibility", 
    "#models-apply": handleModelsApply,
    "#was-apply": handleWASApply,
};

// LISTEN FOR CLICK ON ID(KEY) LISTED IN URLOUTPUTDICT AND OUTPUT (VALUE) TO BROWSER SEARCH BAR
$(document).ready(function () {
    // MATCH ID WITH THE TOOGLEMAP KEY AND OUTPUT URL VALUE
    $(document).on('click', Object.keys(urlOuputDict).join(', '), function () {
	var selector = "#" + $(this).attr('id');
	var value = urlOuputDict[selector];
	var url = typeof value === 'function' ? value() : value;
	sendURL(url);
    });
});
