{% extends "snippets/layout.html" %}

{% block description "Löst gekürzte URLs auf und entfernt Tracking Parameter. Für weniger Überwachung." %}

{% block title "Untrack - Entfernt Tracking Parameter aus der URL" %}

{% block css %}
		.main {
			font-size: inherit !important;
		}
		.hidden {
			display: none;
		}
		.alert {
			margin-bottom: 0;
		}
		.copy {
			margin-top: 0.1rem;
			margin-bottom: 1rem;
			padding-left: 1.25rem;
			padding-right: 1.25rem;
		}
		form {
			margin-top: 1rem;
		}
{% endblock %}

{% block main %}
<div class="container">

	<div class="flavor-text">
		<h1>
		Untrack
		</h1>
		<em>Entfernt Tracking Parameter aus der URL</em>
	</div>

	<form id="form">
		<div class="form-group">
			<label for="url">Gib die URL ein</label>
			<input id="url" class="form-control" type="text" placeholder="https://amzn.to/asdf123" value="{{ url }}" required>

		</div>
		<div class="form-group">
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="unshort" checked>
				<label class="custom-control-label" for="unshort" id="unshort-label">Erkenne gekürzte Links</label>
			</div>
		</div>

		<div id="result" class="hidden" style="margin-bottom: 1rem;">
			<div class="alert alert-info" id="result-field" style="margin-bottom: 0;">
				<strong><span id="result-header">Ihre saubere URL lautet:<span></strong>
				<br>
				<span id="fill-result"></span><br>
			</div>
			<div class="copy">
				<span id="copy-text">Klicke um die URL zu kopieren.</span>
			</div>
		</div>

		<div class="form-group" id="submit-buttons">
			<button class="btn btn-primary" type="submit">Untrack!</button>
		</div>
	</form>

</div>

	<script>
	const trackingParams = [ 'utm_', 'mtm_', 'ref', 'tag', 'gclid', 'gclsrc', 'dclid', 'fbclid', 'zanpid'];

	async function resolve(url) {
		console.log("resolving: " + url);
		const anfrage = {
			url: encodeURI(url)
		}
		let response = await fetch('/resolve.php', { method: 'POST', body: JSON.stringify(anfrage) });

		if (response.redirect) {
			console.log("Redirect detected");
		}

		if ( response.ok ) {
			let json = await response.json();

			url = json.url;
		} else {
			console.log("Failed to fetch response");
			fail();
		}

		console.log("returning url: " + url);
		return url;
	}

	function untrack(_url) {
		if ( ! _url.startsWith("http") ) {
			_url = "http://" + _url;
		}	
		let url = new URL( _url );

		if ( url.host.match("(www|smile)\.amazon\.([a-zA-Z]+)") ) {
			if ( url.href.includes('/ref=') ) {
				url.href =  url.href.toString().replace(/ref=(.+)/, '')
			} else {
				url.href =  url.href.toString().replace(/\?(.+)/, '')
			}
		} else {
			var searchParams = new URLSearchParams(url.searchParams.toString());

			searchParams.forEach(function(value, key){
				for ( i in trackingParams ) {
					if ( 
						( trackingParams[i].includes('_') && key.startsWith(trackingParams[i]) )
						||
						( trackingParams[i] === key )
					) {
						url.searchParams.delete(key);
					}
				}
			});
		}

		return url.href.toString();
	};

	function printResult(url) {
		document.getElementById('result').classList.remove('hidden');
		document.getElementById('fill-result').innerHTML = url;
	}
	const resultheader = document.getElementById('result-header').innerHTML;

	function fail() {
		document.getElementById('result-field').classList.remove('alert-info');
		document.getElementById('result-field').classList.add('alert-danger');
		document.getElementById('result-header').innerHTML = "Zu viele Anfragen. URL wurde eventuell nicht aufgelöst. (nochmal probieren)";
	}

	function reset() {
		document.getElementById('result-field').classList.add('alert-info');
		document.getElementById('result-field').classList.remove('alert-danger');
		document.getElementById('result-header').innerHTML = resultheader;
	}

	function copy(that){
		var inp = document.createElement('input');
		document.body.appendChild(inp)
		inp.value = that;
		inp.select();
		document.execCommand('copy',false);
		console.log("Copied: " + inp.value);
		inp.remove();
		document.getElementById('copy-text').innerHTML = "<em>In den Zwischenspeicher kopiert!</em>";
	}
	function offline(){
			document.getElementById('unshort-label').innerHTML = "<em>Nicht verfügbar wenn Offline</em>";
			document.getElementById('unshort').disabled = true;
	}
	function online(){
			document.getElementById('unshort-label').innerHTML = "Erkenne gekürzte Links";
			document.getElementById('unshort').disabled = false;
	}

	window.addEventListener("load",function() {
		document.getElementById('form').addEventListener("submit", async (e) => {
			e.preventDefault();
			reset();
			let url = document.getElementById('url').value

			url = untrack (url);

			if ( document.getElementById('unshort').checked ) {
				url = await resolve(url);
				url = untrack (url);
			}

			printResult(url);
		});

		document.getElementById('result').addEventListener("click", function(e){
			copy(document.getElementById('fill-result').innerHTML);
		});

		if ( ! navigator.onLine ) {
			offline();
		}
	});
	window.addEventListener('online', () => {
			online();
	});
	window.addEventListener('offline', () => {
			offline();
	});
	</script>
{% endblock %}