import { UNITS } from './modules/config.mjs';

/* globals NoSleep, states, navigation, utils */
document.addEventListener('DOMContentLoaded', () => {
	init();
});

const overrides = {};
const AutoRefreshIntervalMs = 500;
const AutoRefreshTotalIntervalMs = 600000; // 10 min.

let AutoSelectQuery = false;

let LastUpdate = null;
let AutoRefreshIntervalId = null;
let AutoRefreshCountMs = 0;

let FullScreenOverride = false;

const categories = [
	'Land Features',
	'Bay', 'Channel', 'Cove', 'Dam', 'Delta', 'Gulf', 'Lagoon', 'Lake', 'Ocean', 'Reef', 'Reservoir', 'Sea', 'Sound', 'Strait', 'Waterfall', 'Wharf', // Water Features
	'Amusement Park', 'Historical Monument', 'Landmark', 'Tourist Attraction', 'Zoo', // POI/Arts and Entertainment
	'College', // POI/Education
	'Beach', 'Campground', 'Golf Course', 'Harbor', 'Nature Reserve', 'Other Parks and Outdoors', 'Park', 'Racetrack',
	'Scenic Overlook', 'Ski Resort', 'Sports Center', 'Sports Field', 'Wildlife Reserve', // POI/Parks and Outdoors
	'Airport', 'Ferry', 'Marina', 'Pier', 'Port', 'Resort', // POI/Travel
	'Postal', 'Populated Place',
];
const cats = categories.join(',');

const init = () => {
	document.getElementById('txtAddress').addEventListener('focus', (e) => {
		e.target.select();
	});

	document.getElementById('NavigateMenu').addEventListener('click', btnNavigateMenuClick);
	document.getElementById('NavigateRefresh').addEventListener('click', btnNavigateRefreshClick);
	document.getElementById('NavigateNext').addEventListener('click', btnNavigateNextClick);
	document.getElementById('NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
	document.getElementById('NavigatePlay').addEventListener('click', btnNavigatePlayClick);
	document.getElementById('ToggleFullScreen').addEventListener('click', btnFullScreenClick);
	document.getElementById('btnGetGps').addEventListener('click', btnGetGpsClick);

	document.getElementById('divTwc').addEventListener('click', () => {
		if (document.fullscreenElement) UpdateFullScreenNavigate();
	});

	document.addEventListener('keydown', documentKeydown);
	document.addEventListener('touchmove', (e) => { if (FullScreenOverride) e.preventDefault(); });

	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
		deferRequestBy: 300,
		paramName: 'text',
		params: {
			f: 'json',
			countryCode: 'USA', // 'USA,PRI,VIR,GUM,ASM',
			category: cats,
			maxSuggestions: 10,
		},
		dataType: 'json',
		transformResult: (response) => {
			if (AutoSelectQuery) {
				AutoSelectQuery = false;
				window.setTimeout(() => {
					$(ac.suggestionsContainer.children[0]).click();
				}, 1);
			}

			return {
				suggestions: $.map(response.suggestions, (i) => ({
					value: i.text,
					data: i.magicKey,
				})),
			};
		},
		minChars: 3,
		showNoSuggestionNotice: true,
		noSuggestionNotice: 'No results found. Please try a different search string.',
		onSelect(suggestion) { autocompleteOnSelect(suggestion, this); },
		width: 490,
	});

	const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
	$('#frmGetLatLng').on('submit', () => {
		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).click();
		return false;
	});

	// Auto load the previous query
	const TwcQuery = localStorage.getItem('TwcQuery');
	if (TwcQuery) {
		AutoSelectQuery = true;
		const txtAddress = document.getElementById('txtAddress');
		txtAddress.value = TwcQuery;
		txtAddress.blur();
		txtAddress.focus();
	}

	const TwcPlay = localStorage.getItem('TwcPlay');
	if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');

	document.getElementById('btnClearQuery').addEventListener('click', () => {
		document.getElementById('spanCity').innerHTML = '';
		document.getElementById('spanState').innerHTML = '';
		document.getElementById('spanStationId').innerHTML = '';
		document.getElementById('spanRadarId').innerHTML = '';
		document.getElementById('spanZoneId').innerHTML = '';

		localStorage.removeItem('TwcScrollText');
		localStorage.removeItem('TwcScrollTextChecked');

		document.getElementById('chkAutoRefresh').checked = true;
		localStorage.removeItem('TwcAutoRefresh');

		document.getElementById('radEnglish').checked = true;
		localStorage.removeItem('TwcUnits');

		localStorage.removeItem('TwcPlay');
		postMessage('navButton', 'play');

		localStorage.removeItem('TwcQuery');
	});

	const TwcUnits = localStorage.getItem('TwcUnits');
	if (!TwcUnits || TwcUnits === 'ENGLISH') {
		document.getElementById('radEnglish').checked = true;
		navigation.message({ type: 'units', message: 'english' });
	} else if (TwcUnits === 'METRIC') {
		document.getElementById('radMetric').checked = true;
		navigation.message({ type: 'units', message: 'metric' });
	}

	document.getElementById('radEnglish').addEventListener('change', changeUnits);
	document.getElementById('radMetric').addEventListener('change', changeUnits);

	document.getElementById('chkAutoRefresh').addEventListener('change', (e) => {
		const Checked = e.target.checked;

		if (LastUpdate) {
			if (Checked) {
				StartAutoRefreshTimer();
			} else {
				StopAutoRefreshTimer();
			}
		}

		localStorage.setItem('TwcAutoRefresh', Checked);
	});

	const TwcAutoRefresh = localStorage.getItem('TwcAutoRefresh');
	if (!TwcAutoRefresh || TwcAutoRefresh === 'true') {
		document.getElementById('chkAutoRefresh').checked = true;
	} else {
		document.getElementById('chkAutoRefresh').checked = false;
	}

	// swipe functionality
	document.getElementById('container').addEventListener('swiped-left', () => swipeCallBack('left'));
	document.getElementById('container').addEventListener('swiped-right', () => swipeCallBack('right'));
};

const changeUnits = (e) => {
	const Units = e.target.value;
	localStorage.setItem('TwcUnits', Units);
	AssignLastUpdate();
	postMessage('units', Units);
};

const autocompleteOnSelect = async (suggestion, elem) => {
	// Do not auto get the same city twice.
	if (elem.previousSuggestionValue === suggestion.value) return;

	if (overrides[suggestion.value]) {
		doRedirectToGeometry(overrides[suggestion.value]);
	} else {
		const data = await utils.fetch.json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
			data: {
				text: suggestion.value,
				magicKey: suggestion.data,
				f: 'json',
			},
		});

		const loc = data.locations[0];
		if (loc) {
			doRedirectToGeometry(loc.feature.geometry);
		} else {
			console.error('An unexpected error occurred. Please try a different search string.');
		}
	}
};

const doRedirectToGeometry = (geom) => {
	const latLon = { lat: Math.round2(geom.y, 4), lon: Math.round2(geom.x, 4) };
	LoadTwcData(latLon);
	// Save the query
	localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
};

const btnFullScreenClick = () => {
	if (!document.fullscreenElement) {
		EnterFullScreen();
	} else {
		ExitFullscreen();
	}

	if (navigation.isPlaying()) {
		noSleep(true);
	} else {
		noSleep(false);
	}

	UpdateFullScreenNavigate();

	return false;
};

const EnterFullScreen = () => {
	const element = document.getElementById('divTwc');

	// Supports most browsers and their versions.
	const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen
			|| element.mozRequestFullScreen || element.msRequestFullscreen;

	if (requestMethod) {
		// Native full screen.
		requestMethod.call(element, { navigationUI: 'hide' }); // https://bugs.chromium.org/p/chromium/issues/detail?id=933436#c7
	} else {
		// iOS doesn't support FullScreen API.
		window.scrollTo(0, 0);
		FullScreenOverride = true;
	}
	navigation.resize();
	UpdateFullScreenNavigate();

	// change hover text
	document.getElementById('ToggleFullScreen').title = 'Exit fullscreen';
};

const ExitFullscreen = () => {
	// exit full-screen

	if (FullScreenOverride) {
		FullScreenOverride = false;
	}

	if (document.exitFullscreen) {
		// Chrome 71 broke this if the user pressed F11 to enter full screen mode.
		document.exitFullscreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	navigation.resize();
	// change hover text
	document.getElementById('ToggleFullScreen').title = 'Enter fullscreen';
};

const btnNavigateMenuClick = () => {
	postMessage('navButton', 'menu');
	UpdateFullScreenNavigate();
	return false;
};

const LoadTwcData = (_latLon) => {
	// if latlon is provided store it locally
	if (_latLon) LoadTwcData.latLon = _latLon;
	// get the data
	const { latLon } = LoadTwcData;
	// if there's no data stop
	if (!latLon) return;

	document.getElementById('txtAddress').blur();
	StopAutoRefreshTimer();
	LastUpdate = null;
	AssignLastUpdate();

	postMessage('latLon', latLon);
};

const swipeCallBack = (direction) => {
	switch (direction) {
	case 'left':
		btnNavigateNextClick();
		break;

	case 'right':
	default:
		btnNavigatePreviousClick();
		break;
	}
};

const AssignLastUpdate = () => {
	if (LastUpdate) {
		switch (navigation.units()) {
		case UNITS.english:
			LastUpdate = LastUpdate.toLocaleString('en-US', {
				weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short',
			});
			break;
		default:
			LastUpdate = LastUpdate.toLocaleString('en-GB', {
				weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short',
			});
			break;
		}
	}

	document.getElementById('spanLastRefresh').innerHTML = LastUpdate;

	if (LastUpdate && document.getElementById('chkAutoRefresh').checked) StartAutoRefreshTimer();
};

const btnNavigateRefreshClick = () => {
	navigation.resetStatuses();
	LoadTwcData();
	UpdateFullScreenNavigate();

	return false;
};

const btnNavigateNextClick = () => {
	postMessage('navButton', 'next');
	UpdateFullScreenNavigate();

	return false;
};

const btnNavigatePreviousClick = () => {
	postMessage('navButton', 'previous');
	UpdateFullScreenNavigate();

	return false;
};

let NavigateFadeIntervalId = null;

const UpdateFullScreenNavigate = () => {
	document.activeElement.blur();
	document.getElementById('divTwcBottom').classList.remove('hidden');
	document.getElementById('divTwcBottom').classList.add('visible');

	if (NavigateFadeIntervalId) {
		clearTimeout(NavigateFadeIntervalId);
		NavigateFadeIntervalId = null;
	}

	NavigateFadeIntervalId = setTimeout(() => {
		if (document.fullscreenElement) {
			document.getElementById('divTwcBottom').classList.remove('visible');
			document.getElementById('divTwcBottom').classList.add('hidden');
		}
	}, 2000);
};

const documentKeydown = (e) => {
	const code = (e.keyCode || e.which);

	// 200ms repeat
	if ((Date.now() - documentKeydown.lastButton ?? 0) < 200) return false;
	documentKeydown.lastButton = Date.now();

	if (document.fullscreenElement || document.activeElement === document.body) {
		switch (code) {
		case 32: // Space
			btnNavigatePlayClick();
			return false;

		case 39: // Right Arrow
		case 34: // Page Down
			btnNavigateNextClick();
			return false;

		case 37: // Left Arrow
		case 33: // Page Up
			btnNavigatePreviousClick();
			return false;

		case 36: // Home
			btnNavigateMenuClick();
			return false;

		case 48: // Restart
			btnNavigateRefreshClick();
			return false;

		case 70: // F
			btnFullScreenClick();
			return false;

		default:
		}
	}
	return false;
};

Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);

const btnNavigatePlayClick = () => {
	postMessage('navButton', 'playToggle');
	UpdateFullScreenNavigate();

	return false;
};

// read and dispatch an event from the iframe
const message = (data) => {
	const playButton = document.getElementById('NavigatePlay');
	// dispatch event
	if (!data.type) return;
	switch (data.type) {
	case 'loaded':
		LastUpdate = new Date();
		AssignLastUpdate();
		break;

	case 'weatherParameters':
		populateWeatherParameters(data.message);
		break;

	case 'isPlaying':
		localStorage.setItem('TwcPlay', navigation.isPlaying());

		if (navigation.isPlaying()) {
			noSleep(true);
			playButton.title = 'Pause';
			playButton.src = 'images/nav/ic_pause_white_24dp_1x.png';
		} else {
			noSleep(false);
			playButton.title = 'Play';
			playButton.src = 'images/nav/ic_play_arrow_white_24dp_1x.png';
		}
		break;

	default:
		console.error(`Unknown event '${data.eventType}`);
	}
};

// post a message to the iframe
const postMessage = (type, myMessage = {}) => {
	navigation.message({ type, message: myMessage });
};

const StartAutoRefreshTimer = () => {
	// Ensure that any previous timer has already stopped.
	// check if timer is running
	if (AutoRefreshIntervalId) return;

	// Reset the time elapsed.
	AutoRefreshCountMs = 0;

	const AutoRefreshTimer = () => {
		// Increment the total time elapsed.
		AutoRefreshCountMs += AutoRefreshIntervalMs;

		// Display the count down.
		let RemainingMs = (AutoRefreshTotalIntervalMs - AutoRefreshCountMs);
		if (RemainingMs < 0) {
			RemainingMs = 0;
		}
		const dt = new Date(RemainingMs);
		document.getElementById('spanRefreshCountDown').innerHTML = `${dt.getMinutes() < 10 ? `0${dt.getMinutes()}` : dt.getMinutes()}:${dt.getSeconds() < 10 ? `0${dt.getSeconds()}` : dt.getSeconds()}`;

		// Time has elapsed.
		if (AutoRefreshCountMs >= AutoRefreshTotalIntervalMs && !navigation.isPlaying()) LoadTwcData();
	};
	AutoRefreshIntervalId = window.setInterval(AutoRefreshTimer, AutoRefreshIntervalMs);
	AutoRefreshTimer();
};
const StopAutoRefreshTimer = () => {
	if (AutoRefreshIntervalId) {
		window.clearInterval(AutoRefreshIntervalId);
		document.getElementById('spanRefreshCountDown').innerHTML = '--:--';
		AutoRefreshIntervalId = null;
	}
};

const btnGetGpsClick = async () => {
	if (!navigator.geolocation) return;

	const position = await (() => new Promise((resolve) => {
		navigator.geolocation.getCurrentPosition(resolve);
	}))();
	const { latitude, longitude } = position.coords;

	let data;
	try {
		data = await utils.fetch.json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode', {
			data: {
				location: `${longitude},${latitude}`,
				distance: 1000, // Find location up to 1 KM.
				f: 'json',
			},
		});
	} catch (e) {
		console.error('Unable to fetch reverse geocode');
		console.error(e.status, e.responseJSONe);
	}
	const ZipCode = data.address.Postal;
	const { City } = data.address;
	const State = states.getTwoDigitCode(data.address.Region);
	const Country = data.address.CountryCode;
	const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;

	const txtAddress = document.getElementById('txtAddress');
	txtAddress.value = TwcQuery;
	txtAddress.blur();
	txtAddress.focus();

	// Save the query
	localStorage.setItem('TwcQuery', TwcQuery);
};

const populateWeatherParameters = (weatherParameters) => {
	document.getElementById('spanCity').innerHTML = `${weatherParameters.city}, `;
	document.getElementById('spanState').innerHTML = weatherParameters.state;
	document.getElementById('spanStationId').innerHTML = weatherParameters.stationId;
	document.getElementById('spanRadarId').innerHTML = weatherParameters.radarId;
	document.getElementById('spanZoneId').innerHTML = weatherParameters.zoneId;
};

// track state of nosleep locally to avoid a null case error
// when nosleep.disable is called without first calling .enable
let wakeLock = false;
const noSleep = (enable = false) => {
	// get a nosleep controller
	if (!noSleep.controller) noSleep.controller = new NoSleep();
	// don't call anything if the states match
	if (wakeLock === enable) return false;
	// store the value
	wakeLock = enable;
	// call the function
	if (enable) return noSleep.controller.enable();
	return noSleep.controller.disable();
};

const refreshCheck = () => {
	// Time has elapsed.
	if (AutoRefreshCountMs >= AutoRefreshTotalIntervalMs) {
		LoadTwcData();
		return true;
	}
	return false;
};

export {
	init,
	message,
	refreshCheck,
};

window.index = {
	init,
	message,
	refreshCheck,
};