class TimeDate {
	constructor() {
		this._timeDateButton = document.querySelector("#time-date")
		this._timeLabel = document.querySelector("#time-date #time-label")
		this._dateLabel = document.querySelector("#time-date #date-label")
		this._passForm = document.querySelector("#pass-form")
		this._init()
	}

	_updateTimeDate() {
		let date = theme_utils.get_current_localized_date()
		let time = theme_utils.get_current_localized_time()

		this._dateLabel.innerText = date
		this._timeLabel.innerText = time
	}

	_setTimer() {
		this._updateTimeDate()
		setInterval(() => {
			this._updateTimeDate()
		}, 1000)
	}

	_setButtons() {
		this._timeDateButton.addEventListener("click", (ev) => {
			this.toggleTimeDate()
		})
		this._passForm.addEventListener("keydown", (ev) => {
			if (ev.keyCode == 27) {
				this.toggleTimeDate()
			}
		})
	}

	async toggleTimeDate() {
		this._timeDateButton.blur()
		this._passForm.blur()
		if (this._timeDateButton.classList.contains("hide")) {
			this._passForm.classList.add("hide")
			await wait(300)
			this._timeDateButton.classList.remove("hide")
			await wait(100)
			this._timeDateButton.focus()
		} else {
			this._timeDateButton.classList.add("hide")
			await wait(300)
			this._passForm.classList.remove("hide")
		}
	}
	
	_init() {
		this._setTimer()
		this._setButtons()
	}
}