import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { ApiService } from '../../../shared/api.service';
import { AgGridAngular } from 'ag-grid-angular';
import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent } from 'ag-grid-community';
import { HotToastService } from '@ngxpert/hot-toast';
import { AuthService } from '../../../core/auth/auth.service';
import { DatePipe } from '@angular/common';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';

@Component({
  selector: 'app-all-users',
  standalone: true,
  imports: [AgGridAngular],
  providers: [DatePipe],
  templateUrl: './all-users.component.html',
  styleUrl: './all-users.component.scss'
})
export class AllUsersComponent {

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

  gridApi!: GridApi;

  gridOptions: GridOptions = {
    localeText: AG_GRID_LOCALE_DE,
    rowData: [],
    columnDefs: [
      { field: 'username' , headerName: 'User', flex: 1, editable: this.authService.isAdmin, sort: 'asc', filter: true },
      { field: 'firstName', headerName: 'Vorname', flex: 1, editable: this.authService.isAdmin, filter: true},
      { field: 'lastName', headerName: 'Nachname', flex: 1, editable: this.authService.isAdmin, filter: true},
      { field: 'isActive', headerName: 'Aktiv', width: 70, editable: (params) => params.data.id != this.authService.user.id && this.authService.isAdmin, },
      { field: 'role', headerName: 'Rolle', width: 100 ,editable: this.authService.isAdmin, cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
          values: ['user', 'develop', 'admin'],
      },
      singleClickEdit: true,
      cellEditorPopup: false
       },
       {
        field: 'createdAt'
        , headerName: 'Erstellt'
        , width: 120
        , type: 'date'
        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
      },
       {
        field: 'lastLogin'
        , headerName: 'Letzter Login'
        , width: 170
        , type: 'date'
        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
      }
    ],
    loading: true,
    overlayLoadingTemplate: 'Lade Daten...'
  }

  ngOnInit(): void {
  }


  loadUsers() {
    this.api.getAllUsers().subscribe({
      next: n => {
        this.gridApi.setGridOption("rowData", n)
        this.gridApi.setGridOption("loading", false);
      }
    })
  }

  cellEditEnd(params: CellEditingStoppedEvent, self: AllUsersComponent) {
    if (!params.valueChanged) { return; }

    self.api.saveUser(params.data)
    .pipe(
      self.toast.observe({
        loading: 'speichern...',
        success: 'Änderungen gespeichert',
        error: 'Änderungen konnten nicht gespeichert werden!'
      })
    ).subscribe({
      error: () => {
        const data = self.gridApi.getRowNode(params.node.id as string);
        data?.setDataValue(params.colDef.field as string, params.oldValue)
      }
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
    const self = this;
    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt, self))
    this.loadUsers();
    console.log(params)
  }

}