import { Directive, HostBinding, inject, input } from '@angular/core';
import { AbstractControl, NgControl } from '@angular/forms';

@Directive({
	selector: '[appControlFeedback]',
	standalone: true,
})
export class ControlFeedbackDirective {
	private readonly ngControl = inject(NgControl, { optional: true });
	control = input<AbstractControl | boolean | undefined>(undefined, { alias: 'appControlFeedback' });
	touched = input(false, { alias: 'appControlTouched' });

	private resolveControl() {
		return this.control() === undefined ? this.ngControl?.control ?? null : this.control();
	}

	@HostBinding('class.is-valid')
	get valid() {
		const control = this.resolveControl();
		if (typeof control === 'boolean') {
			return !control && this.touched();
		}
		return !!control?.valid && !!control?.touched;
	}
	@HostBinding('class.is-invalid')
	get invalid() {
		const control = this.resolveControl();
		if (typeof control === 'boolean') {
			return control && this.touched();
		}
		return !!control?.invalid && !!control?.touched;
	}
}