export class UI {
	constructor() {
		const showAcked = localStorage.getItem('show_acknowledged')
		if (showAcked == 'true') {
			document.getElementById('show-acked').checked = true
			const list = document.getElementById('acknowledged-list')
			list.classList.remove('hidden')
		}
		this.acknowledgeDisplay(showAcked == 'true')
			
		const display = localStorage.getItem('problems_display')
		if (display === null)
			this.displayAreas()
		else {
			switch (display) {
				case 'areas':
					this.displayAreas()
					break
				case 'list':
					this.displayList()
					break
			}
		}
	}

	toggleAcknowledged(evt) {
		this.acknowledgeDisplay(evt.target.checked)
	}

	acknowledgeDisplay(show) {
		const list = document.getElementById('acknowledged-list')
		const areaItems = document.querySelectorAll('.acked')

		if (show) {
			list.classList.remove('hidden')
			areaItems.forEach(item=>item.classList.remove('hidden'))
			localStorage.setItem('show_acknowledged', true)
		} else {
			list.classList.add('hidden')
			areaItems.forEach(item=>item.classList.add('hidden'))
			localStorage.setItem('show_acknowledged', false)
		}
	}

	selectCurrent() {
		location.href = '/problems?selection=current'
	}

	selectAll() {
		location.href = '/problems?selection=all'
	}

	displayList() {
		document.querySelector('.display-list').classList.remove('hidden')
		document.querySelector('.display-areas').classList.add('hidden')
		localStorage.setItem('problems_display', 'list')
		document.getElementById('display-list').setAttribute('checked', 'checked')
	}

	displayAreas() {
		document.querySelector('.display-list').classList.add('hidden')
		document.querySelector('.display-areas').classList.remove('hidden')
		localStorage.setItem('problems_display', 'areas')
		document.getElementById('display-table').setAttribute('checked', 'checked')
	}
}