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 { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';

export interface PElement {
  nfacture: number;
  nom: string;
  prenom: string;
  contact: string;
  service: string;
  email: string;
  montant: number;
  modePaiement: string;
  status: string;
  dateTransaction: string;
}

const ELEMENT_DATA: PElement[] = [
  {
    nfacture: 1,
    nom: 'zaho',
    prenom: 'zadi',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrtest@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '10-04-2024',
  },
  {
    nfacture: 2,
    nom: 'kablan',
    prenom: 'fatou',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrtet@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '16-03-2024',
  },
  {
    nfacture: 3,
    nom: 'toure',
    prenom: 'koffi',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrtest@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'invalide',
    dateTransaction: '04-04-2024',
  },
  {
    nfacture: 4,
    nom: 'belem',
    prenom: 'asaph',
    contact: '0101010101',
    service: 'mtn',
    email: 'test@mail.com',
    montant: 27000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '16-02-2024',
  },
  {
    nfacture: 5,
    nom: 'tanoh',
    prenom: 'delmas',
    contact: '0101010101',
    service: 'mtn',
    email: 'rtest@mail.com',
    montant: 50000,
    modePaiement: 'wave',
    status: 'invalide',
    dateTransaction: '16-04-2024',
  },
  {
    nfacture: 6,
    nom: 'gaba',
    prenom: 'akemane',
    contact: '0101010101',
    service: 'mtn',
    email: 'mtst@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '16-01-2024',
  },
  {
    nfacture: 7,
    nom: 'kra',
    prenom: 'zoulou',
    contact: '0101010101',
    service: 'mtn',
    email: 'mest@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '26-03-2024',
  },
  {
    nfacture: 8,
    nom: 'kakou',
    prenom: 'kasa',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrtst@mail.com',
    montant: 80000,
    modePaiement: 'wave',
    status: 'invalide',
    dateTransaction: '10-04-2024',
  },
  {
    nfacture: 9,
    nom: 'nguessan',
    prenom: 'daouda',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrte@mail.com',
    montant: 25000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '16-04-2024',
  },
  {
    nfacture: 10,
    nom: 'Neon',
    prenom: 'kanon',
    contact: '0101010101',
    service: 'mtn',
    email: 'mrtest@mail.com',
    montant: 27000,
    modePaiement: 'wave',
    status: 'valide',
    dateTransaction: '16-04-2024',
  },
];

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

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

  displayedColumns: string[] = [
    'nfacture',
    'nom',
    'prenom',
    'contact',
    'service',
    'email',
    'montant',
    'modePaiement',
    'status',
    'dateTransaction',
  ];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    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);
  }
  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();
  }
}