import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { AuthService } from '../../core/auth/auth.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ApiService } from '../../shared/api.service';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { HotToastService } from '@ngxpert/hot-toast';
import {MatProgressBarModule} from '@angular/material/progress-bar';

@Component({
    selector: 'app-settings',
    imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule],
    templateUrl: './settings.component.html',
    styleUrl: './settings.component.scss'
})
export class SettingsComponent {
  @Input() isOpen = false;
  @Output() close = new EventEmitter<void>();

  private authService: AuthService = inject(AuthService);
  private api: ApiService = inject(ApiService);
  private toast: HotToastService = inject(HotToastService);

  public isLoading = false;

  userData = new FormGroup({
    firstName: new FormControl(this.firstName, Validators.required),
    lastName: new FormControl(this.lastName, Validators.required),
    userName: new FormControl(this.username, [Validators.required, Validators.email])
  });

  userSettings = new FormGroup({
    id: new FormControl(),
    sendSystemAccessMails: new FormControl(false),
    sendSystemUpdateMails: new FormControl(false),
    sendUserDisabledMails: new FormControl(false),
  })

  open() {
    this.isOpen = true;
    this.loadSettings();
  }

  closeSidebar() {
    if (this.isDirty()) {
      this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
    }
    this.isOpen = false;
  }

  get $userData() {
    return this.userData.controls;
  }

  get username(): string {
    return this.authService.user.username;
  }

  get firstName(): string {
    return this.authService.user.firstName;
  }

  get lastName(): string {
    return this.authService.user.lastName;
  }

  ngOnInit() {
    
  }

  loadSettings() {
    this.isLoading = true;
    this.api.getSettings().subscribe({
      next: (r: any) => {
        this.userSettings.patchValue(r)
        this.isLoading = false;
      }
    })
  }

  save() {
    this.isLoading = true;
    this.api.updateSettings(this.userSettings.value).subscribe({
      next: () => {
        this.toast.success('Gespeichert')
        this.isLoading = false;
        this.userSettings.markAsPristine();
      }
    });
  }

  saveUser() {
    this.isDirty();
    const user = this.authService.user;
    user.firstName = this.$userData.firstName.value!;
    user.lastName = this.$userData.lastName.value!;
    user.username = this.$userData.userName.value!;

    this.api.saveUser(user).subscribe({
      next: () => {
        this.toast.success('Gespeichert');
        this.userSettings.markAsPristine()
      }
    })
  }

  isDirty(): boolean {
    
    return this.userData.dirty || this.userSettings.dirty;
  }
}