import { Component, inject, LOCALE_ID } from '@angular/core';
import { AgGridContainerComponent } from '../../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
import { CommonModule, DatePipe } from '@angular/common';
import { HotToastService } from '@ngxpert/hot-toast';
import { ApiService } from '../../../../shared/api.service';
import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
import { HELPER } from '../../../../shared/helper.service';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { AgGridAngular } from 'ag-grid-angular';
import { ICylinder } from '../../../../model/interface/cylinder.interface';

@Component({
  selector: 'app-cylinder-archive',
  imports: [MatDialogModule, AgGridAngular, MatButtonModule, MatIconModule, CommonModule],
  providers: [DatePipe, { provide: LOCALE_ID, useValue: 'de-DE' }],
  templateUrl: './cylinder-archive.component.html',
  styleUrl: './cylinder-archive.component.scss',
})
export class CylinderArchiveComponent extends AgGridContainerComponent {
  private api: ApiService = inject(ApiService);
  private datePipe = inject(DatePipe);
  private toast = inject(HotToastService);

  gridApi!: GridApi;
  
  gridOptions: GridOptions = HELPER.getGridOptions();

  constructor() {
    super();

    this.createGridOptions();
  
  }

  private createGridOptions() {
    this.gridOptions.columnDefs = [
      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
      { colId: 'nr', field: 'nr' , headerName: 'Name', flex: 1, editable: true, filter: true },
      {
        field: 'deletedAt'
        , headerName: 'Gelöscht'
        , width: 160
        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value), 'short')
      },
      {
        width: 40,
        cellRenderer: () => '<div class="icon-btn-sm restore icon-btn-xs" ></div>',
        onCellClicked: (event) => { this.restoreCylinder(event.data);},
        tooltipValueGetter: () => 'Wiederherstellen',
        sortable: false
      }
    ];
    this.gridOptions.rowHeight = 36;
    this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Zylinder gelöscht. Sobald dies der Fall ist, werden sie hier angezeigt.';
  }
  

  async restoreCylinder(data: ICylinder) {
    this.gridApi.setGridOption("loading", true);
    await this.api.restoreCylinder(data);
    this.loadCylinders();
  }

  onGridReady(params: GridReadyEvent) {
      this.gridApi = params.api;
      this.loadCylinders();
    }

    async loadCylinders() {
      this.gridApi.setGridOption("loading", true);
      const cylinders = await this.api.getCylinderArchive();
      this.gridApi.setGridOption("rowData", cylinders);
      this.gridApi.setGridOption("loading", false);
    }

}