'use strict';

mw.loader.using(['mediawiki.util'], function() {
	const small = window.innerWidth <= 768;
	const pad = n => (n < 10 ? '0' + n : n);

	function currentTime(target) {
		const now = new Date();
		const delay = 60000 - (1000 * now.getUTCSeconds() + now.getUTCMilliseconds());
		target.textContent = pad(now.getUTCHours()) + ':' + pad(now.getUTCMinutes());
		setTimeout(() => currentTime(target), delay);
	}

	function borderGray(element) {
		if (CSS.supports('color', 'color-mix(in srgb, red, blue)')) {
			const style = window.getComputedStyle(element);
			return `color-mix(in srgb, ${style.backgroundColor} 70%, gray 30%)`;
		}
		return 'gray';
	}

	function addClock() {
		const clock = document.createElement('div');
		clock.className = 'utc-clock';
		clock.style.position = 'fixed';
		clock.style.bottom = small ? '2px' : '10px';
		clock.style.right = small ? '2px' : '10px';
		clock.style.zIndex = 1000;
		clock.style.padding = small ? '1px' : '3px';
		clock.style.fontSize = small ? 'var(--font-size-small, 14px)' : 'var(--font-size-medium, 16px)';
		if (['vector-2022', 'minerva'].includes(mw.config.get('skin'))) {
			clock.style.border = 'solid 1px var(--border-color-muted)';
			clock.style.color = 'var(--color-base)';
			clock.style.backgroundColor = 'var(--background-color-base)';
		} else {
			const base = document.getElementById('mw-content-text') || document.body;
			clock.style.border = `solid 1px ${borderGray(base)}`;
		}
		document.body.appendChild(clock);
		currentTime(clock);
	}

	if (small && mw.config.get('wgAction') === 'view' && [0, 10, 12, 14, 100].includes(mw.config.get('wgNamespaceNumber')) && !window.location.search) {
		return;
	}
	addClock();
});