import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { email, form, FormField, maxLength, required, submit } from '@angular/forms/signals';
import { RouterLink } from '@angular/router';
import { injectMutation } from '@tanstack/angular-query-experimental';
import { map } from 'rxjs';
import { injectAuthService } from '@/core/services/auth.service';
import { injectCatalogService } from '@/core/services/catalogs.service';
import { injectUIService } from '@/core/services/ui.service';
import { CheckboxComponent } from '@/shared/forms/checkbox/checkbox.component';
import { signalFormErrors } from '@/shared/forms/form-validations';
import { InputComponent } from '@/shared/forms/input/input.component';
import { SelectComponent } from '@/shared/forms/select/select.component';
import { AuthLayoutComponent } from '@/shared/layout/auth-layout/auth-layout.component';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { ModalComponent } from '@/shared/ui/modal/modal.component';
import { PrivacyComponent } from '../../features/legal/privacy/privacy.component';

@Component({
	selector: 'app-signup',
	templateUrl: './signup.component.html',
	styleUrls: ['./signup.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [
		RouterLink,
		FormField,
		InputComponent,
		CheckboxComponent,
		ButtonDirective,
		AuthLayoutComponent,
		ModalComponent,
		SelectComponent,
		PrivacyComponent,
	],
	standalone: true,
})
export default class SignupComponent {
	private authSrv = injectAuthService();
	private uiServ = injectUIService();
	private catalogServ = injectCatalogService();

	openTerms = signal(false);
	fieldVisibility = signal({
		name: true,
		lastname1: true,
		lastname2: true,
		email: true,
		emailc: true,
		password: false,
		passwordc: false,
		phone: true,
		mexico_state_id: false,
		other1: false,
		other2: false,
		accept_terms: true,
	});

	signupModel = signal({
		name: '',
		lastname1: '',
		lastname2: '',
		email: '',
		emailc: '',
		password: '',
		passwordc: '',
		phone: '',
		mexico_state_id: null as number | null,
		other1: '',
		other2: '',
		accept_terms: false,
	});

	signupForm = form(this.signupModel, (path) => {
		required(path.name, { message: signalFormErrors.required });
		maxLength(path.name, 40, { message: signalFormErrors.maxLength(40) });
		required(path.lastname1, { message: signalFormErrors.required });
		maxLength(path.lastname1, 40, { message: signalFormErrors.maxLength(40) });
		required(path.lastname2, { message: signalFormErrors.required });
		maxLength(path.lastname2, 40, { message: signalFormErrors.maxLength(40) });
		required(path.email, { message: signalFormErrors.required });
		email(path.email, { message: signalFormErrors.email });
		required(path.emailc, { message: signalFormErrors.required });
		email(path.emailc, { message: signalFormErrors.email });
		required(path.phone, { message: signalFormErrors.required });
		required(path.accept_terms, { message: signalFormErrors.acceptTerms });
	});

	signup = injectMutation(() => ({
		mutationFn: (_: void) => this.authSrv.signup(this.signupModel()),
		onError: (error) => this.uiServ.showErrorAlert(error.message),
	}));

	mexicoStates = toSignal(
		this.catalogServ.getMexicoStates().pipe(
			map((states) =>
				states.map(({ mexico_state, mexico_state_id }) => ({
					value: mexico_state_id,
					label: mexico_state,
				}))
			)
		),
		{ initialValue: [] as { value: number; label: string }[] }
	);

	canSubmit = computed(() => !this.signupForm().invalid() && !this.signup.isPending());

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

	openTermsModal(e: MouseEvent) {
		e.preventDefault();
		e.stopPropagation();
		this.openTerms.set(true);
	}
}