import { Component, model, 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 { MatCheckboxModule } from '@angular/material/checkbox';
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 { GroupDirImportComponent } from "../../group-dir-import/group-dir-import.component";
import { GroupService } from '../../../services/api/group.service';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-group-form',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, MatCheckboxModule, CommonModule, MatTabsModule, UserGroupDirImportComponent, GroupDirImportComponent],
  templateUrl: './group-form.component.html',
  styleUrl: './group-form.component.scss'
})
export class GroupFormComponent {
  readonly groupname = new FormControl('', [Validators.required]);
  readonly active = new FormControl<boolean>(true);

  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"
  //public readonly checkBoxBSClass: (colCount: number | undefined) => string = (colCount: number = 2) => `col-${colCount} d-flex justify-content-left mx-1 my-2`

  readonly checked = model(true);

  constructor(private uService: UserService, private rService: RefreshService, private gService: GroupService) {
    merge(
      this.groupname.statusChanges, this.groupname.valueChanges)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.updateErrorMessage());
  }

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

  create() {
    if (this.groupname.valid) {
      this.gService.create({
        name: this.groupname.value!,
        adSync: false,
        internal: true,
        active: this.active.value!
      }).subscribe({
        next: () => {
          this.delete()
          this.rService.executeAll();
          Swal.fire({
            title: "Vorgang erfolgreich!",
            text: "Gruppe erfolgreich erstellt!",
            icon: "success"
          });
        }
      })
    }
  }

  delete() {
    this.groupname.setValue('')
    this.active.setValue(true)
  }  
}