'use strict';
'require view';
'require dom';
'require poll';
'require request';
'require ui';
'require rpc';
'require network';

const callLuciRealtimeStats = rpc.declare({
	object: 'luci',
	method: 'getRealtimeStats',
	params: [ 'mode', 'device' ],
	expect: { result: [] }
});

const graphPolls = [];
const pollInterval = 3;

Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };

function rate(n, br) {
	n = (n || 0).toFixed(2);
	return [ '%1024.2mbit/s'.format(n * 8), br ? E('br') : ' ', '(%1024.2mB/s)'.format(n) ]
}

return view.extend({
	load() {
		return Promise.all([
			this.loadSVG(L.resource('svg/bandwidth.svg')),
			network.getDevices()
		]);
	},

	updateGraph(ifname, svg, lines, cb) {
		const G = svg.firstElementChild;

		const view = document.querySelector('#view');

		const width  = view.offsetWidth - 2;
		const height = 300 - 2;
		const step   = 5;

		const data_wanted = Math.floor(width / step);

		const data_values = [];

		for (const line of lines)
			if (line)
				data_values.push([]);

		const info = {
			line_current: [],
			line_average: [],
			line_peak:    []
		};

		/* prefill datasets */
		for (let i = 0; i < data_values.length; i++)
			for (let j = 0; j < data_wanted; j++)
					data_values[i][j] = 0;

		/* plot horizontal time interval lines */
		for (let i = width % (step * 60); i < width; i += step * 60) {
			const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
			line.setAttribute('x1', i);
			line.setAttribute('y1', 0);
			line.setAttribute('x2', i);
			line.setAttribute('y2', '100%');
			line.setAttribute('style', 'stroke:black;stroke-width:0.1');

			const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
			text.setAttribute('x', i + 5);
			text.setAttribute('y', 15);
			text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
			text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));

			G.appendChild(line);
			G.appendChild(text);
		}

		info.interval = pollInterval;
		info.timeframe = data_wanted / 60;

		graphPolls.push({
			ifname: ifname,
			svg:    svg,
			lines:  lines,
			cb:     cb,
			info:   info,
			width:  width,
			height: height,
			step:   step,
			values: data_values,
			timestamp: 0,
			fill: 1
		});
	},

	pollData() {
		poll.add(L.bind(function() {
			const tasks = [];

			for (const ctx of graphPolls) {
				tasks.push(L.resolveDefault(callLuciRealtimeStats('interface', ctx.ifname), []));
			}

			return Promise.all(tasks).then(L.bind(function(datasets) {
				for (let gi = 0; gi < graphPolls.length; gi++) {
					let ctx = graphPolls[gi];
					const data = datasets[gi];
					const values = ctx.values;
					const lines = ctx.lines;
					const info = ctx.info;

					let data_scale = 0;
					const data_wanted = Math.floor(ctx.width / ctx.step);
					let last_timestamp = NaN;

					for (let i = 0, di = 0; di < lines.length; di++) {
						if (lines[di] == null)
							continue;

						const multiply = (lines[di].multiply != null) ? lines[di].multiply : 1;
						const offset = (lines[di].offset != null) ? lines[di].offset : 0;

						for (let j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
							/* skip overlapping entries */
							if (data[j][0] <= ctx.timestamp)
								continue;

							if (i == 0) {
								ctx.fill++;
								last_timestamp = data[j][0];
							}

							if (lines[di].counter) {
								/* normalize difference against time interval */
								if (j > 0) {
									var time_delta = data[j][0] - data[j - 1][0];
									if (time_delta) {
										info.line_current[i] = (data[j][di + 1] * multiply - data[j - 1][di + 1] * multiply) / time_delta;
										info.line_current[i] -= Math.min(info.line_current[i], offset);
										values[i].push(info.line_current[i]);
									}
								}
							}
							else {
								info.line_current[i] = data[j][di + 1] * multiply;
								info.line_current[i] -= Math.min(info.line_current[i], offset);
								values[i].push(info.line_current[i]);
							}
						}

						i++;
					}

					/* cut off outdated entries */
					ctx.fill = Math.min(ctx.fill, data_wanted);

					for (let i = 0; i < values.length; i++) {
						const len = values[i].length;
						values[i] = values[i].slice(len - data_wanted, len);

						/* find peaks, averages */
						info.line_peak[i] = NaN;
						info.line_average[i] = 0;

						for (let j = 0; j < values[i].length; j++) {
							info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
							info.line_average[i] += values[i][j];
						}

						info.line_average[i] = info.line_average[i] / ctx.fill;
					}

					info.peak = Math.max.apply(Math, info.line_peak);

					/* remember current timestamp, calculate horizontal scale */
					if (!isNaN(last_timestamp))
						ctx.timestamp = last_timestamp;

					const size = Math.floor(Math.log2(info.peak));
					const div = Math.pow(2, size - (size % 10));
					const p_o_d = info.peak / div;
					const mult = (p_o_d < 5) ? 2 : ((p_o_d < 50) ? 10 : ((p_o_d < 500) ? 100 : 1000));

					info.peak = info.peak + (mult * div) - (info.peak % (mult * div));

					data_scale = ctx.height / info.peak;

					/* plot data */
					for (let i = 0, di = 0; di < lines.length; di++) {
						if (lines[di] == null)
							continue;

						const el = ctx.svg.firstElementChild.getElementById(lines[di].line);
						let pt = `0,${ctx.height}`;
						let y = 0;

						if (!el)
							continue;

						for (let j = 0; j < values[i].length; j++) {
							const x = j * ctx.step;

							y = ctx.height - Math.floor(values[i][j] * data_scale);
							//y -= Math.floor(y % (1 / data_scale));

							y = isNaN(y) ? ctx.height : y;

							pt += ` ${x},${y}`;
						}

						pt += ` ${ctx.width},${y} ${ctx.width},${ctx.height}`;

						el.setAttribute('points', pt);

						i++;
					}

					info.label_25 = 0.25 * info.peak;
					info.label_50 = 0.50 * info.peak;
					info.label_75 = 0.75 * info.peak;

					if (typeof(ctx.cb) == 'function')
						ctx.cb(ctx.svg, info);
				}
			}, this));
		}, this), pollInterval);
	},

	loadSVG(src) {
		return request.get(src).then(function(response) {
			if (!response.ok)
				throw new Error(response.statusText);

			return E('div', {
				'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
			}, E(response.text()));
		});
	},

	render([svg, devs]) {

		const v = E('div', { 'class': 'cbi-map', 'id': 'map' }, E('div'));

		for (const dev of devs) {
			const ifname = dev.getName();
			const ssid = dev.wif?.getSSID?.() || null;

			if (!ifname || !dev.isUp() || dev.wif?.isDisabled())
				continue;

			const csvg = svg.cloneNode(true);

			v.firstElementChild.appendChild(E('div', { 'class': 'cbi-section', 'data-tab': ifname, 'data-tab-title': ssid ? `${ifname} ${ssid}` : ifname }, [
				csvg,
				E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
				E('br'),

				E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
					E('tr', { 'class': 'tr' }, [
						E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Inbound:') ])),
						E('td', { 'class': 'td', 'id': 'rx_bw_cur' }, rate(0, true)),

						E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
						E('td', { 'class': 'td', 'id': 'rx_bw_avg' }, rate(0, true)),

						E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
						E('td', { 'class': 'td', 'id': 'rx_bw_peak' }, rate(0, true))
					]),
					E('tr', { 'class': 'tr' }, [
						E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Outbound:') ])),
						E('td', { 'class': 'td', 'id': 'tx_bw_cur' }, rate(0, true)),

						E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
						E('td', { 'class': 'td', 'id': 'tx_bw_avg' }, rate(0, true)),

						E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
						E('td', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
					])
				]),
				E('div', {'class': 'cbi-section-create'})
			]));

			this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
				const G = svg.firstElementChild, tab = svg.parentNode;

				G.getElementById('label_25').firstChild.data = rate(info.label_25).join('');
				G.getElementById('label_50').firstChild.data = rate(info.label_50).join('');
				G.getElementById('label_75').firstChild.data = rate(info.label_75).join('');

				tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);

				dom.content(tab.querySelector('#rx_bw_cur'), rate(info.line_current[0], true));
				dom.content(tab.querySelector('#rx_bw_avg'), rate(info.line_average[0], true));
				dom.content(tab.querySelector('#rx_bw_peak'), rate(info.line_peak[0], true));

				dom.content(tab.querySelector('#tx_bw_cur'), rate(info.line_current[1], true));
				dom.content(tab.querySelector('#tx_bw_avg'), rate(info.line_average[1], true));
				dom.content(tab.querySelector('#tx_bw_peak'), rate(info.line_peak[1], true));
			});
		}

		ui.tabs.initTabGroup(v.firstElementChild.childNodes);

		this.pollData();

		return  E([], [
			E('h2', _('Bandwidth')),
			E('div', {'class': 'cbi-map-descr'}, _('This page displays the bandwidth used for all available physical interfaces.')),
			v
		]);
	},

	handleSaveApply: null,
	handleSave: null,
	handleReset: null
});
