const calendarSVG =
	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
		<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
		<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
	</svg>`
;
const doorClosedSVG =
	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
		<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
		<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
	</svg>`
;
const doorOpenSVG =
	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
		<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
		<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
	</svg>`
;

const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: 'medium', timeStyle: 'short'});

function setL10n() {
	document.querySelector('html').setAttribute('lang', browser.i18n.getUILanguage());

	const loadingText = browser.i18n.getMessage('loading');
	document.getElementById('state').textContent = loadingText;
	document.getElementById('calendar').textContent = loadingText;
	document.querySelector('#space-api > code').textContent = loadingText;
	document.getElementById('currentState').textContent = browser.i18n.getMessage('currentState');
	document.getElementById('links').textContent = browser.i18n.getMessage('links');
	document.getElementById('nextEvent').textContent = browser.i18n.getMessage('nextEvent');
	document.getElementById('spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson');
}

/**
 * @param {Event} event
 */
async function linkElementClickListener(event) {
	try {
		await browser.tabs.create({url: event.currentTarget.dataset.url});
	} catch (error) {
		console.error(error);
	}
}

async function init() {
	setL10n();

	const linkElements = Array.from(document.getElementsByClassName('link'));
	linkElements.forEach((linkElement) => {
		linkElement.addEventListener('click', linkElementClickListener);
	});

	const {calendar, spaceApi} = await browser.storage.local.get(['calendar', 'spaceApi']);

	if (calendar) {
		updateNextEvent(calendar);
	}
	if (spaceApi) {
		updateSpaceApiJson(spaceApi);
		updateState(spaceApi);
	}
}
init();

/**
 * @param {Array<object>} nextEvents
 */
function updateNextEvent(nextEvents) {
	const calendarElement = document.getElementById('calendar');
	calendarElement.innerText = '';

	if (nextEvents.length === 0) {
		const strongElement = document.createElement('strong');
		strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
		calendarElement.append(strongElement);
	} else {
		const nextEventDate = nextEvents[0].begin.substr(0, 10);
		const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));

		nextEventDateEvents.forEach((nextEventDateEvent) => {
			const calenderEntryElement = document.createElement('div');
			calenderEntryElement.classList.add('calendar-entry');
			calenderEntryElement.innerHTML = calendarSVG;

			const containerElement = document.createElement('div');
			calenderEntryElement.append(containerElement);

			const strongElement = document.createElement('strong');
			strongElement.textContent = nextEventDateEvent.name;

			const beginDate = new Date(nextEventDateEvent.begin);
			const timeElement = document.createElement('time');
			timeElement.dateTime = beginDate.toISOString();
			timeElement.textContent = dateTimeFormat.format(beginDate);

			const titleElement = document.createElement('div');
			titleElement.append(strongElement, timeElement);
			containerElement.append(titleElement);

			if (nextEventDateEvent.location) {
				const locationElement = document.createElement('div');

				const addressElement = document.createElement('address');
				addressElement.textContent = nextEventDateEvent.location;

				const parenthesesOpenNode = document.createTextNode('(');
				const parenthesesCloseNode = document.createTextNode(')');

				locationElement.append(parenthesesOpenNode, addressElement, parenthesesCloseNode);
				containerElement.append(locationElement);
			}
			calendarElement.append(calenderEntryElement);
		});
	}
}

/**
 * @param {object} spaceApi
 */
function updateSpaceApiJson(spaceApi) {
	const json = JSON.stringify(spaceApi, null, 2)
		.replace(/ /g, '&nbsp;')
		.replace(/\n/g, '<br/>');
	const spaceApiElement = document.querySelector('#space-api > code');
	spaceApiElement.innerHTML = json;
	// const jsonNode = document.createTextNode(json);
	// spaceApiElement.innerText = '';
	// spaceApiElement.append(jsonNode);
}

/**
 * @param {object} spaceApi
 */
function updateState(spaceApi) {
	const stateIcon = spaceApi.state.open ? doorOpenSVG : doorClosedSVG;
	const stateTextNode = document.createTextNode(browser.i18n.getMessage(spaceApi.state.open ? 'openSince' : 'closedSince'));

	const since = new Date(spaceApi.state.lastchange * 1000);
	const timeElement = document.createElement('time');
	timeElement.dateTime = since.toISOString();
	timeElement.textContent = dateTimeFormat.format(since);

	const stateElement = document.getElementById('state');
	stateElement.innerHTML = stateIcon;
	stateElement.append(stateTextNode, timeElement);
}