import { IComponentController } from 'angular'
import { Component, Input, Output } from '../../components/decorators'
import { getTimeZone, getTimeZones, TimeZone } from './time-zone-city.service'

@Component({
	selector: 'mflyTimeZoneCityPicker',
	template: require('./time-zone-city-picker.html'),
})
export default class TimeZoneCityPickerController implements IComponentController {

	@Input('@') inputId: string
	@Input() timeZoneName: string
	@Output() onTimeZoneChange: (param: { timeZoneName: string }) => void

	protected timeZone: TimeZone
	protected timeZones: TimeZone[] = []

	$onInit(): void {

		this.timeZones = getTimeZones()
		this.setTimeZone(this.timeZoneName)
	}

	$onChanges(changes: { timeZoneName: ng.IChangesObject<string> }): void {

		if (changes.timeZoneName) {
			this.setTimeZone(changes.timeZoneName.currentValue)
		}
	}

	protected timeZoneChange(timeZone: TimeZone) {

		this.timeZone = timeZone
		this.onTimeZoneChange({ timeZoneName: timeZone.timeZoneName })
	}

	private setTimeZone(timeZoneName: string): void {

		const oldTimeZone = this.timeZone
		this.timeZone = getTimeZone(timeZoneName)
			?? getTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
			?? getTimeZone('America/Chicago')
			?? this.timeZones[0]
		if (oldTimeZone !== this.timeZone) {
			this.onTimeZoneChange({ timeZoneName: this.timeZone.timeZoneName })
		}
	}
}