import { ChangeDetectionStrategy, Component, inject, input, model, output, signal } from '@angular/core';
import { form, FormField, submit } from '@angular/forms/signals';
import { injectMutation } from '@tanstack/angular-query-experimental';
import { injectStaffService } from '@/core/services/staff.service';
import { injectUIService } from '@/core/services/ui.service';
import { InputComponent } from '@/shared/forms/input/input.component';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { ModalComponent } from '@/shared/ui/modal/modal.component';
import { transformToBoolean } from '@/shared/ui/utils';

type CreateUser = {
	name: string;
	lastname1: string;
	lastname2: string;
	email: string;
	emailc: string;
	phone: string;
	mexico_state_id: number | null;
	other1: string;
	other2: string;
};

type CreatedUser = Partial<CreateUser> & { id: number };

@Component({
	selector: 'app-user-create',
	standalone: true,
	templateUrl: './user-create.component.html',
	styleUrl: './user-create.component.css',
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [
		FormField,
		ModalComponent,
		InputComponent,
		ButtonDirective,
	],
})
export class UserCreateComponent {
	private staffServ = injectStaffService();
	private uiServ = injectUIService();
	signedUp = output<CreatedUser>();
	show = input(true, { transform: transformToBoolean });
	openSignUp = model(false);
	private readonly initialModel: CreateUser = {
		name: '',
		lastname1: '',
		lastname2: '',
		email: '',
		emailc: '',
		phone: '',
		mexico_state_id: null,
		other1: '',
		other2: '',
	};
	formModel = signal<CreateUser>({ ...this.initialModel });
	form = form(this.formModel);
	signup = injectMutation(() => ({
		mutationFn: (_: void) => this.staffServ.createUser(this.formModel()),
		onError: (error) => this.uiServ.showErrorAlert(error.message),
		onSuccess: ({ id }) => {
			this.signedUp.emit({ ...this.formModel(), id });
			this.signup.reset();
			this.formModel.set({ ...this.initialModel });
		},
	}));

	onSubmit(event: Event) {
		event.preventDefault();
		submit(this.form, {
			action: async () => this.signup.mutate(),
		});
	}
}