/// <reference path="../jQuery/jquery.d.ts" />
/// <reference path="../knoema/knoema.RegionSelector.d.ts" />
/// <reference path="../knoema/Knoema.Widget.ts" />
/// <reference path="../trackers/event-tracker.ts" />
/// <reference path="../knoema/Knoema.Utils.d.ts" />

$((): void => {
	$("tbody", "table.compare").each(function(i: number, tbody: HTMLElement): void {
		let $tbody = $(tbody);
		if ($tbody.children().length === 0) {
			$tbody.closest("table").hide();
		}
	});

	$("div:last", "div#country-values").css("margin-right", 0);

	$("body").on("click", "a.dialog.button", function (): boolean {
		EventTracker.track('Atlas - Action', { 'Command': 'Compare' }, (): void => {
			let options: Knoema.Widget.CompareWidgetOptions = {
				selected: $("input#selected-regions").length > 0 ? $("input#selected-regions").val().split(",") : null,
				level: +$(this).attr("data-level") || 2,
				parent: $(this).attr("data-region-id") || null,
				countries: $("#countries-ids").val() ? $("#countries-ids").val().split(",") : [],
				groupName: $("#countries-group-name").val() ? $("#countries-group-name").val() : "",
				currentRegionId: $(this).attr("data-current-region-id") || null
			};

			new Knoema.Widget.AtlasCompare(this.href, options);
		}, true);
		return false;
	});

	$("body").on("click", "ul#atlas-tabs.matrix a", function(): boolean {
		$("a", "ul#atlas-tabs.matrix").removeClass("active");
		let $anchor = $(this);
		$anchor.addClass("active");

		if ($anchor.hasClass("growth")) {
			$("h3.h3-growth").addClass("active");
			$("h3.h3-scale").removeClass("active");
			$("tr.no-scale", "table.compare").show();
		}
		else { //$anchor.hasClass("scale")
			$("tr.no-scale", "table.compare").hide();
			$("h3.h3-scale").addClass("active");
			$("h3.h3-growth").removeClass("active");
		}

		let val = $("span.value");
		if (val.hasClass("small"))
			val.removeClass("small");
		else
			val.addClass("small");
		
		$("span.growth-change").toggle();
		$("span.scale-change").toggle();

		return false;
	});

	$("body").on("click", "div#atlas div#divider a.export.button", function (): boolean {
		EventTracker.track('Atlas - Action', { 'Command': 'Export' }, (): void => {
			let compareTable = $("div#tables-holder", "div#atlas");
			if (compareTable.length) {
				let page = compareTable.clone().wrap("<div id='tables-holder'>").parent();
				page.find("h3.active").show();
				let html = page.html();

				let $form = $('form#export-form');
				$form.attr('action', '/api/1.0/utils/export');

				$.get($('link[href*="Atlas\/region"]').prop('href'), (styles) => {
					$form.find('input[name="content"]').val(`<style>${styles}tbody tr:nth-child(odd) { background-color: #f0f0f0; }</style>${html}`);
					$form.find('input[name="fileName"]').val($('#atlas-tabs').find('.active').text());

					EventTracker.track("Export", { "Format": "pdf" }, function (): void {
						$form.submit();
					});

					EventTracker.increment("Number Of Exports");
				});
			}
		}, true);
		return false;
	});
})