/**
 * @aurora-catalyst-generated
 * @source cliter/iam/user.aurora.yaml
 */
import { ChangeDetectionStrategy, Component, effect, inject, input, output } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ValidationMessagePipe } from '@aurora';
import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmSwitchImports } from '@spartan-ng/helm/switch';
import { type IamUser } from '@src/src/app/aurora.types';

@Component({
  selector: 'au-user-form',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ReactiveFormsModule,
    TranslocoDirective,
    ValidationMessagePipe,
    HlmFieldImports,
    HlmInputImports,
    HlmLabelImports,
    HlmSwitchImports,
  ],
  providers: [provideTranslocoScope('iam')],
  template: `
    <ng-container *transloco="let t; scope: 'iam'">
      <!-- #region AURORA:FORM-FIELDS-START -->
      <form
        class="grid grid-cols-1 gap-x-4 gap-y-5 md:grid-cols-12"
        [formGroup]="signalForm"
        (ngSubmit)="submit()"
      >
        <hlm-field class="col-span-12 md:col-span-12">
          <label
            hlmLabel
            for="name"
          >
            {{ t('iam.user.Name') }}
          </label>
          <input
            id="name"
            hlmInput
            formControlName="name"
            maxlength="128"
          />
          <hlm-field-error>
            {{ signalForm.get('name')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 md:col-span-12">
          <label
            hlmLabel
            for="surname"
          >
            {{ t('iam.user.Surname') }}
          </label>
          <input
            id="surname"
            hlmInput
            formControlName="surname"
            maxlength="255"
          />
          <hlm-field-error>
            {{ signalForm.get('surname')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 md:col-span-12">
          <label
            hlmLabel
            for="avatar"
          >
            {{ t('iam.user.Avatar') }}
          </label>
          <input
            id="avatar"
            hlmInput
            formControlName="avatar"
            maxlength="255"
          />
          <hlm-field-error>
            {{ signalForm.get('avatar')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 md:col-span-6">
          <label
            hlmLabel
            for="mobile"
          >
            {{ t('iam.user.Mobile') }}
          </label>
          <input
            id="mobile"
            hlmInput
            formControlName="mobile"
            maxlength="64"
          />
          <hlm-field-error>
            {{ signalForm.get('mobile')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 md:col-span-6">
          <label
            hlmLabel
            for="password"
          >
            {{ t('iam.user.Password') }}
          </label>
          <input
            id="password"
            type="password"
            hlmInput
            formControlName="password"
            maxlength="255"
          />
          <hlm-field-error>
            {{ signalForm.get('password')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 pt-5 md:col-span-3">
          <label
            class="flex items-center"
            hlmLabel
            for="isTwoFactorAuthenticationEnabled"
          >
            <hlm-switch
              class="mr-2"
              inputId="isTwoFactorAuthenticationEnabled"
              formControlName="isTwoFactorAuthenticationEnabled"
            />
            {{ t('iam.user.IsTwoFactorAuthenticationEnabled') }}
          </label>
        </hlm-field>

        <hlm-field class="col-span-12 md:col-span-6">
          <label
            hlmLabel
            for="twoFactorAuthenticationSecret"
          >
            {{ t('iam.user.TwoFactorAuthenticationSecret') }}
          </label>
          <input
            id="twoFactorAuthenticationSecret"
            hlmInput
            formControlName="twoFactorAuthenticationSecret"
            maxlength="32"
          />
          <hlm-field-error>
            {{ signalForm.get('twoFactorAuthenticationSecret')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
        <hlm-field class="col-span-12 md:col-span-12">
          <label
            hlmLabel
            for="rememberToken"
          >
            {{ t('iam.user.RememberToken') }}
          </label>
          <input
            id="rememberToken"
            hlmInput
            formControlName="rememberToken"
            maxlength="255"
          />
          <hlm-field-error>
            {{ signalForm.get('rememberToken')?.errors | validationMessage }}
          </hlm-field-error>
        </hlm-field>
      </form>
      <!-- #endregion AURORA:FORM-FIELDS-END -->
    </ng-container>
  `,
})
export class UserFormComponent {
  // injections
  private readonly fb = inject(FormBuilder);

  // inputs
  readonly initial = input<IamUser | null>(null);
  readonly mode = input.required<'new' | 'edit'>();

  // outputs
  readonly save = output<IamUser>();
  readonly cancel = output<void>();
  readonly signalForm: FormGroup = this.fb.group({
    id: [null],
    accountId: [null],
    name: ['', [Validators.required, Validators.maxLength(128)]],
    surname: ['', [Validators.maxLength(255)]],
    avatar: ['', [Validators.maxLength(255)]],
    mobile: ['', [Validators.maxLength(64)]],
    langId: [null],
    password: ['', [Validators.required, Validators.maxLength(255)]],
    isTwoFactorAuthenticationEnabled: [false],
    twoFactorAuthenticationSecret: ['', [Validators.maxLength(32)]],
    rememberToken: ['', [Validators.maxLength(255)]],
  });

  constructor() {
    effect(() => {
      const init = this.initial();
      if (init) this.signalForm.reset(init);
    });
  }

  submit(): void {
    if (this.signalForm.invalid) {
      this.signalForm.markAllAsTouched();
      return;
    }
    this.save.emit(this.signalForm.value as IamUser);
  }
}
