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';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';

@Component({
    selector: 'app-settings',
    imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule, MatSelectModule, MatDialogModule, MatIconModule],
    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);
  private dialogRef = inject(MatDialogRef<SettingsComponent>);

  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),
    uiScale: new FormControl('s')
  })

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

  closeSidebar() {
    if (this.isDirty()) {
      this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
    }
    this.dialogRef.close()
  }

  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() {
    
  }

  async loadSettings() {
    this.isLoading = true;
    const settings = await this.api.userSettings;
    this.userSettings.patchValue(settings);
    this.isLoading = false;
  }

  async save() {
    this.isLoading = true;
    const res = await this.api.updateSettings(this.userSettings.value);
    this.isLoading = false;
    if (res) {
      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;
  }
}