import {
	ChangeDetectionStrategy,
	Component,
	ElementRef,
	output,
	signal,
	viewChild,
} from '@angular/core';
import { form, FormField, submit } from '@angular/forms/signals';
import { ButtonDirective } from '@/shared/ui/button.directive';

@Component({
	selector: 'app-code-input',
	standalone: true,
	imports: [FormField, ButtonDirective],
	templateUrl: './code-input.component.html',
	styleUrl: './code-input.component.scss',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CodeInputComponent {
	scanned = output<string>();
	inputRef = viewChild.required<ElementRef<HTMLInputElement>>('input');
	scanModel = signal({ code: '' });
	scanForm = form(this.scanModel);
	interval!: ReturnType<typeof setInterval>;
	ngAfterViewInit(): void {
		const input = this.inputRef().nativeElement;
		this.keepInputFocus(input);
	}
	ngOnDestroy(): void {
		clearInterval(this.interval);
	}
	emitScan(event: Event) {
		event.preventDefault();
		const code = this.scanModel().code.trim();
		if (!code) return;
		submit(this.scanForm, {
			action: async () => {
				this.scanned.emit(code);
				this.scanModel.set({ code: '' });
			},
		});
	}
	private keepInputFocus(input: HTMLInputElement) {
		input.focus();
		this.interval = setInterval(() => {
			if (input !== document.activeElement) {
				input.focus();
			}
		}, 100);
	}
}