import {Component} from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NavigationService} from "@service/navigation.service";
import {passwordMatchValidator} from '@service/password-match.validator';
import SetupService from "@api/v1/setup.service";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select";
import {MatInput} from "@angular/material/input";
import {MatTooltip} from "@angular/material/tooltip";
import {MatIconButton} from "@angular/material/button";
import {MatIcon} from "@angular/material/icon";

@Component({
  selector: 'app-create-admin',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInput,
    MatTooltip,
    MatIconButton,
    MatIcon
  ],
  templateUrl: './create-admin.component.html'
})

export class CreateAdminComponent {
  protected createAdminForm!: FormGroup;
  protected hidePass = true;
  protected hideRetypePass = true;

  constructor(
    private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService) {
    this.createAdminForm = this.formBuilder.group({
        user: ['', Validators.pattern(/^([A-Za-z0-9]){4,}$/)],
        email: ['', Validators.email],
        password: ['', Validators.required],
        retype: ['', Validators.required]
      },
      {validators: passwordMatchValidator('password', 'retype')}
    );

    this.createAdminForm.get('password')?.setValidators([Validators.required,
      Validators.pattern(/[A-Z]/),
      Validators.pattern(/[!@#$%^&*]/),
      Validators.minLength(8)
    ]);

    this.navigationService.setNextButtonState(false);
    this.createAdminForm.valueChanges.subscribe(() => {
      this.navigationService.setNextButtonState(this.createAdminForm.valid);
    });

    this.navigationService.nextButtonAction = () => {
      return this.api.createAdmin({
          "email": this.createAdminForm.get('email')?.value,
          "username": this.createAdminForm.get('user')?.value,
          "password": this.createAdminForm.get('password')?.value
        }
      );
    };
  }

  protected togglePassword(event: MouseEvent) {
    this.hidePass = !this.hidePass;
    event.stopPropagation();
  }

  protected toggleRetypePassword(event: MouseEvent) {
    this.hideRetypePass = !this.hideRetypePass;
    event.stopPropagation();
  }
}