import { Component, inject } from '@angular/core';
import { ApiService } from '../../../../shared/api.service';
import { ICylinder } from '../../../../model/interface/cylinder.interface';
import { HotToastService } from '@ngxpert/hot-toast';
import { AgGridAngular } from 'ag-grid-angular';
import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-select-key-cylinder',
  standalone: true,
  imports: [AgGridAngular, MatDialogModule, MatButtonModule],
  templateUrl: './select-key-cylinder.component.html',
  styleUrl: './select-key-cylinder.component.scss'
})
export class SelectKeyCylinderComponent {
  private toast: HotToastService = inject(HotToastService);
  readonly dialogRef = inject(MatDialogRef<SelectKeyCylinderComponent>);
  readonly cylinders = inject<ICylinder[]>(MAT_DIALOG_DATA);

  gridApi!: GridApi;
  
  gridOptions: GridOptions = {
    localeText: AG_GRID_LOCALE_DE,
    loading: false,
    rowData: this.cylinders,
    onSelectionChanged: (event) => {
      this.selectionChanged();
    },
    rowSelection: 'multiple',
    columnDefs: [
      // selected rows
      { colId: 'selected', headerName: '', checkboxSelection: true, width: 40, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true },
      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
    ]
  };

  selectedCylinders: ICylinder[] = [];

  ngOnInit(): void {
    console.log(this.toast)
    this.toast.error('Wähle die Zylinder aus, die dem Schlüssel zugeordnet werden sollen.');
  }

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

  selectionChanged(): void {
    this.selectedCylinders =this.gridApi?.getSelectedRows();
  }
}