(function () {
	"use strict";

	function numberFormat(value) {
		return new Intl.NumberFormat().format(Number(value) || 0);
	}

	function pointPath(points) {
		return points
			.map(function (point, index) {
				return (index === 0 ? "M" : "L") + point.x + " " + point.y;
			})
			.join(" ");
	}

	function renderChart(container, rows) {
		var width = 920;
		var height = 280;
		var pad = 34;
		var values = rows.map(function (row) {
			return Number(row.views) || 0;
		});
		var max = Math.max.apply(null, values.concat([1]));
		var step = rows.length > 1 ? (width - pad * 2) / (rows.length - 1) : 0;
		var points = rows.map(function (row, index) {
			return {
				x: Math.round(pad + step * index),
				y: Math.round(height - pad - ((Number(row.views) || 0) / max) * (height - pad * 2)),
				row: row
			};
		});
		var path = pointPath(points);
		var area = path + " L " + (width - pad) + " " + (height - pad) + " L " + pad + " " + (height - pad) + " Z";
		var last = rows[rows.length - 1] || { views: 0, label: "" };
		var total = values.reduce(function (sum, value) {
			return sum + value;
		}, 0);
		var dots = points.map(function (point) {
			return '<circle class="avin-chart-dot" tabindex="0" cx="' + point.x + '" cy="' + point.y + '" r="4"><title>' + point.row.label + ": " + numberFormat(point.row.views) + '</title></circle>';
		}).join("");
		var grid = [0, 0.25, 0.5, 0.75, 1].map(function (ratio) {
			var y = Math.round(pad + ratio * (height - pad * 2));
			return '<line x1="' + pad + '" y1="' + y + '" x2="' + (width - pad) + '" y2="' + y + '"></line>';
		}).join("");
		var labels = points
			.filter(function (point, index) {
				return index === 0 || index === points.length - 1 || index % Math.ceil(points.length / 5) === 0;
			})
			.map(function (point) {
				return '<text x="' + point.x + '" y="' + (height - 8) + '">' + point.row.label + "</text>";
			})
			.join("");

		container.innerHTML = [
			'<div class="avin-chart-metrics">',
			'<span><strong>' + numberFormat(total) + '</strong> total views</span>',
			'<span><strong>' + numberFormat(last.views) + '</strong> latest day</span>',
			"</div>",
			'<svg viewBox="0 0 ' + width + " " + height + '" role="img" aria-label="Views trend chart">',
			'<defs><filter id="avinGlow" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="4" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter><linearGradient id="avinLine" x1="0" x2="1" y1="0" y2="0"><stop offset="0%" stop-color="#00e5ff"/><stop offset="55%" stop-color="#9b6dff"/><stop offset="100%" stop-color="#00ff9d"/></linearGradient><linearGradient id="avinArea" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#00e5ff" stop-opacity=".34"/><stop offset="55%" stop-color="#9b6dff" stop-opacity=".12"/><stop offset="100%" stop-color="#00ff9d" stop-opacity="0"/></linearGradient></defs>',
			'<g class="avin-chart-grid">' + grid + "</g>",
			'<path class="avin-chart-area" d="' + area + '"></path>',
			'<path class="avin-chart-line" d="' + path + '"></path>',
			'<g class="avin-chart-dots">' + dots + "</g>",
			'<g class="avin-chart-labels">' + labels + "</g>",
			"</svg>"
		].join("");
	}

	function initTrendChart() {
		var container = document.querySelector("[data-avin-chart='viewsTrend']");
		if (!container || !window.avinAdmin || !window.avinAdmin.charts) {
			return;
		}
		var chart = window.avinAdmin.charts.viewsTrend || {};
		var buttons = Array.prototype.slice.call(document.querySelectorAll("[data-avin-range]"));

		function show(range) {
			buttons.forEach(function (button) {
				button.classList.toggle("is-active", button.dataset.avinRange === range);
			});
			renderChart(container, chart[range] || []);
		}

		buttons.forEach(function (button) {
			button.addEventListener("click", function () {
				show(button.dataset.avinRange);
			});
		});

		show("seven");
	}

	document.addEventListener("DOMContentLoaded", initTrendChart);
}());
