import { booleanAttribute, ChangeDetectionStrategy, Component, input, model } from '@angular/core';
import type { FormCheckboxControl } from '@angular/forms/signals';
import { ControlErrorDirective } from '../control-error.directive';
import { ControlFeedbackDirective } from '../control-feedback.directive';

@Component({
	selector: 'app-checkbox',
	templateUrl: './checkbox.component.html',
	styleUrls: ['./checkbox.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [ControlFeedbackDirective, ControlErrorDirective],
})
export class CheckboxComponent implements FormCheckboxControl {
	class = input('');
	name = input('');
	required = input(false, { transform: booleanAttribute });
	disabled = input(false, { transform: booleanAttribute });
	readonly = input(false, { transform: booleanAttribute });
	hidden = input(false, { transform: booleanAttribute });
	invalid = input(false, { transform: booleanAttribute });
	pending = input(false, { transform: booleanAttribute });
	dirty = input(false, { transform: booleanAttribute });
	errors = input<readonly any[]>([]);
	touched = model(false);
	checked = model(false);

	onInput(event: Event) {
		const target = event.target as HTMLInputElement;
		this.checked.set(target.checked);
	}

	onBlur() {
		this.touched.set(true);
	}
}