import {
	ChangeDetectionStrategy,
	Component,
	effect,
	ElementRef,
	inject,
	input,
	signal,
	viewChild,
} from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { Router } from '@angular/router';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { injectStaffService } from '@/core/services/staff.service';
import { InputComponent } from '@/shared/forms/input/input.component';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { injectPrintBadge } from '../print-badge';

@Component({
	selector: 'app-search-users',
	standalone: true,
	imports: [FormField, InputComponent, ButtonDirective],
	templateUrl: './search-users.component.html',
	styleUrl: './search-users.component.scss',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchUsersComponent {
	private router = inject(Router);
	private staffServ = injectStaffService();
	pdfIframe = viewChild<ElementRef<HTMLIFrameElement>>('pdfIframe');
	search = input('');
	searchModel = signal({
		search: '',
	});
	searchForm = form(this.searchModel);
	syncSearch = effect(
		() => {
			const search = this.search();
			if (!search) return;
			this.searchModel.update((model) => ({ ...model, search }));
		},
		{ allowSignalWrites: true }
	);
	users = injectQuery(() => ({
		queryKey: ['users', this.search()],
		queryFn: () => this.staffServ.searchUsers(this.search()),
	}));
	printBadge = injectPrintBadge(this.pdfIframe);
	searchUsers() {
		const search = this.searchModel().search.trim();
		if (!search) return;
		this.router.navigate(['/app'], { queryParams: { search } });
	}
	reset() {
		this.searchModel.set({ search: '' });
		this.router.navigate(['/app']);
	}
}