import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { CommonModule } from '@angular/common';
import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { RouterLink } from '@angular/router';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'bgui-suivi-transaction',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    CommonModule,
    HttpClientModule,
    RouterLink,
    FormsModule,
  ],
  templateUrl: './suivi-transaction.component.html',
  styleUrl: './suivi-transaction.component.scss',
})
export class SuiviTransactionComponent {
  //private HtUrl = 'http://192.168.1.223:8000/transaction-history/';

  private url = 'http://192.168.1.223:8001/operateur/';

  transactions: ITransaction[] = [];
  operateurs: IOperateur[] = [];
  selectedOperateur: string = '';

  constructor(
    private httpClient: HttpClient,
    public transactionService: TransactionService
  ) {}

  ngOnInit(): void {
    this.transactionService.getAll().subscribe((data: ITransaction[]) => {
      this.transactions = data;
      console.log('transactions===>', this.transactions);

      this.fetchOperateurs();
    });
  }

  fetchOperateurs(): void {
    this.httpClient.get<IOperateur>(this.url).subscribe(
      (data: IOperateur) => {
        this.operateurs.push(data);

        console.log('operateur==>', this.operateurs);
      },
      error => {
        console.error(
          "Une erreur s'est produite lors de la récupération des opérateurs :",
          error
        );
      }
    );
  }

  onOperateurChange(event: Event): void {
    const selectElement = event.target as HTMLSelectElement;
    this.selectedOperateur = selectElement.value;
    console.log('Selected opérateur ===>', this.selectedOperateur);
  }

  displayedColumns: string[] = [
    'transaction_id',
    'type_paiement',
    'type_paiement_label',
    'marchand',
    'service',
    'montant',
    'date',
    'commentaire',
    'etat',
    'status',
    'reference',
  ];

  dataSource = new MatTableDataSource(this.transactions);

  @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;

  ngAfterViewInit() {
    if (this.paginator) {
      this.dataSource.paginator = this.paginator;
    }
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}