import { Component, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { merge } from 'rxjs';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';
import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component";
import { UserService } from '../../../services/api/user.service';
import { RefreshService } from '../../../services/button/refresh.service';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, UserGroupDirImportComponent],
  templateUrl: './user-create-form.component.html',
  styleUrl: './user-create-form.component.scss'
})
export class UserCreateFormComponent {
  readonly email = new FormControl('', [Validators.required, Validators.email]);
  readonly username = new FormControl('', [Validators.required]);
  readonly name = new FormControl('', [Validators.required]);
  readonly surname = new FormControl('', [Validators.required]);

  mailErrorMessage = signal('');
  errorMessage = signal('');

  public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
  public readonly buttonBSClass: string = "d-flex justify-content-center mx-1 my-2"

  constructor(private uService: UserService, private rService: RefreshService) {
    merge(
      this.email.statusChanges, this.email.valueChanges)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.updateMailErrorMessage());

      merge(
        this.username.statusChanges, this.username.valueChanges,
        this.name.statusChanges, this.name.valueChanges,
        this.surname.statusChanges, this.surname.valueChanges)
        .pipe(takeUntilDestroyed())
        .subscribe(() => this.updateErrorMessage());
  }

  updateMailErrorMessage() {
    if (this.email.hasError('required')) {
      this.mailErrorMessage.set('Wert eingeben');
    } else if (this.email.hasError('email')) {
      this.mailErrorMessage.set('Ungültige E-Mail');
    } else {
      this.mailErrorMessage.set('');
    }
  }

  updateErrorMessage() {
    if (this.email.hasError('required')) {
      this.errorMessage.set('Wert eingeben');
    } else {
      this.errorMessage.set('');
    }
  }

  create() {
    if (this.email.valid && this.username.valid && this.name.valid && this.surname.valid) {
      this.uService.create({
        email: this.email.value!,
        prename: this.name.value!,
        username: this.username.value!,
        name: this.surname.value!,
      }).subscribe({
        next: () => {
          this.delete()
          this.rService.executeAll();
          Swal.fire({
            title: "Vorgang erfolgreich!",
            text: "Benutzer erfolgreich erstellt!",
            icon: "success"
          });
        }
      })
    }
  }

  delete(){
    this.email.setValue('')
    this.username.setValue('')
    this.name.setValue('')
    this.surname.setValue('')
  }
}