import { DatePipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'; // Column Definition Type Interface
import { ApiService } from '../../shared/api.service';
import { MatIconModule } from '@angular/material/icon';
import {MatCardModule} from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
import { MatButtonModule } from '@angular/material/button';
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';

@Component({
    selector: 'app-dashboard',
    imports: [AgGridAngular, MatIconModule, AgGridAngular, MatCardModule, RouterModule, MatButtonModule],
    providers: [DatePipe],
    templateUrl: './dashboard.component.html',
    styleUrl: './dashboard.component.scss'
})
export class DashboardComponent extends AgGridContainerComponent {
  private api = inject(ApiService);
  private datePipe = inject(DatePipe);
  
  gridOptions: GridOptions = {
    columnDefs: [
      { field: 'createdAt', headerName: 'Zeitpunkt', width: 160, 
        cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) },
      { field: 'message', headerName: 'Aktion', flex: 1 },
      { field: 'user', headerName: 'Benutzer', flex: 0,
        cellRenderer: (data: any) => `${data.value?.firstName} ${data.value?.lastName}` }
    ],
    pagination: true,
    paginationPageSize: 50,
    loading: true,
    localeText: AG_GRID_LOCALE_DE,
    loadingOverlayComponent: AgLoadingComponent
  };
  
  // Stats
  keyCount = 0;
  cylinderCount = 0; 
  systemCount = 0;
  handedOut = 0;
  
  ngOnInit() {
    this.loadStats();
  }
  
  loadStats() {
    this.api.getStats().subscribe(stats => {
      this.keyCount = stats.keys;
      this.cylinderCount = stats.cylinders;
      this.systemCount = stats.systems;
      this.handedOut = stats.handedOut;
    });
  }
  
  onGridReady(params: GridReadyEvent) {
    params.api.setGridOption("loading", true);
    this.api.getActivities().subscribe(activity => {
      params.api.setGridOption("rowData", activity)
      params.api.setGridOption("loading", false);
    });
  }
  
}