'use strict';

// All the pie chars
function makePieChart($parent) {
	var data = $parent.data('chart');
	var chartData = {
		datasets: [{
			data: data.map(function(x) { return x.value; }),
			backgroundColor: data.map(function(x) { return x.color; })
		}]
	};
	var $canv = $('<canvas style="width:100%;height:250px">');
	$parent.append($canv);
	(function() {
		var $dest = $parent.data('chart-dest');
		var cur = null;
		new Chart($canv[0].getContext('2d'), {
			type: 'pie', data: chartData, options: {
				animation: false,
				onHover: function (_, list) {
					if (list.length === 0 || list[0].index !== cur) {
						if (cur !== null) {
							$($dest + cur).removeClass('slx-bold');
							cur = null;
						}
					}
					if (list.length !== 0 && list[0].index !== cur) {
						cur = list[0].index;
						$($dest + cur).addClass('slx-bold');
					}
				},
				plugins: {
					tooltip: {enabled: false},
					legend: {display: false}
				}
			}
		});
		$canv.mouseout(function() {
			if (cur !== null) {
				$($dest + cur).removeClass('slx-bold');
				cur = null;
			}
		});
	})();
}

function popupFilter(field) {
	var $row = addFilter(field, null, null);
	if ($row !== null) {
		$row.find('.arg').focus();
		$row.removeClass('slx-focus')
		setTimeout(function() { $row.addClass('slx-focus'); }, 10);
	}
}

function addFilter(field, op, argument) {
	if (field === null)
		return null;
	var $row = $('#filter-' + field);
	if ($row.length === 0)
		return null;
	if (argument !== null) {
		$row.find('.op').val(op);
		$row.find('.arg').val(argument);
	}
	// Enable checkbox only if we got a predefined value, or if argument is in a select, as the user might want the preselected item and doesn't notice the checkbox is unchecked
	if (argument !== null || $row.find('select.arg').length !== 0) {
		$row.find('.filter-enable').prop('checked', true);
	}
	$row.show();
	return $row;
}

function refresh() {
	$('#query-form').submit();
}

function makeUsagePie($parent) {
	var data = $parent.data('chart');
	var chartData = {
		datasets: [{
			data: data.map(function(x) { return x.value; }),
			backgroundColor: data.map(function(x) { return x.color; }),
			tooltip: data.map(function(x) { return x.tooltip; }),
		}]
	};
	var $canv = $('<canvas style="width:250px;height:250px" width="250" height="250">');
	$parent.append($canv);
	(function() {
		new Chart($canv[0].getContext('2d'), {
			type: 'pie', data: chartData, options: {
				animation: false,
				plugins: {
					tooltip: {
						enabled: true,
						callbacks: {
							label: function(context) {
								return context.dataset.tooltip[context.dataIndex];
							}
						}
					},
					legend: {display: false}
				}
			}
		});
	})();
}