import { IComponentController } from 'angular'
import { Component, Inject, Input, Output } from '../decorators'
import { AutoCompleteMatch } from './auto-complete-match-renderer.component'


@Component({
	selector: 'autoComplete',
	template: require('./auto-complete.component.html'),
})
export default class AutoCompleteComponentController implements IComponentController {

	@Input() clearAfterSelection?: boolean
	@Input() delay?: number
	@Input() displayClose?: boolean
	@Input() isDisabled = false
	@Input() isRequired = false
	@Input('@') inputId!: string
	@Input() minLength?: number
	@Input('@') placeholderText?: string

	@Output() getMatches!: (params: { input: string }) => AutoCompleteMatch[] | ng.IPromise<AutoCompleteMatch[]>
	@Output() onSelect?: (params: { value: AutoCompleteMatch | undefined }) => void

	protected inputValue: string | undefined | null
	protected isFetching: boolean
	protected requiredText: string
	protected validationForm: ng.IFormController

	constructor(
		@Inject('translateFactory') private translateFactory,
	) {}

	$onInit() {

		if (!this.inputId) { throw new Error(`You must provide a string for input-id on the auto-complete component.`) }

		this.requiredText = this.translateFactory.instant('JSUI.REQUIRED')

		if (typeof this.delay === 'undefined') { this.delay = 250 }
		if (typeof this.minLength === 'undefined') { this.minLength = 0 }
	}

	clear() {
		this.inputValue = ''
	}

	doneFetching() {

		this.isFetching = false
	}

	startedFetching() {

		this.isFetching = true
	}

	updateInputValue(value: AutoCompleteMatch, displayValue: string) {

		if (this.onSelect) {
			this.onSelect({ value })
		}

		if (this.clearAfterSelection) {
			this.inputValue = null
			return
		}

		this.inputValue = displayValue
	}
}