import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; // Ajouté
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';

@Component({
  selector: 'bgui-code-provider',
  standalone: true,
  imports: [
    CommonModule,
    CarouselComponent,
    MatFormFieldModule,
    MatCardModule,
    MatCardTitle,
    ReactiveFormsModule,
    MatInputModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    MatTableModule,
    MatPaginatorModule,
    RouterLink,
    FormsModule,
  ],
  templateUrl: './code-provider.component.html',
  styleUrl: './code-provider.component.scss',
})
export class CodeProviderComponent {
  dataSource = new MatTableDataSource<any>([
    { RESEAU: 'ORANGE CI', CODE: 'OMCIV2', PAYS: "COTE D'IVOIRE" },
    { RESEAU: 'MTN CI', CODE: 'MOMOCI', PAYS: "COTE D'IVOIRE" },
    { RESEAU: 'MOOV CI', CODE: 'FLOOZ', PAYS: "COTE D'IVOIRE" },
    { RESEAU: 'ORANGE BF', CODE: 'OMBF', PAYS: 'BURKINA FASO' },
    { RESEAU: 'ORANGE MALI', CODE: 'OMML', PAYS: 'MALI' },
    { RESEAU: 'MTN BENIN', CODE: 'MOMOBJ', PAYS: 'BENIN' },
    { RESEAU: 'VISA / MASTERCARD', CODE: 'CARD', PAYS: 'MONDE' },
    { RESEAU: 'MOOV BENIN', CODE: 'FLOOZBJ', PAYS: 'BENIN' },
    { RESEAU: 'AITEL NIGER', CODE: 'AIRTELNG', PAYS: 'NIGER' },
    { RESEAU: 'WAVE CI', CODE: 'WAVECI', PAYS: "COTE D'IVOIRE" },
    { RESEAU: 'ORANGE SENEGAL', CODE: 'OMSN', PAYS: 'SENEGAL' },
    { RESEAU: 'PAYPAL', CODE: 'PAYPAL', PAYS: 'MONDE' },
    { RESEAU: 'ORANGE GUINEE BISSAU', CODE: 'OMGN', PAYS: 'GUINEE BISSAU' },
  ]);

  displayedColumns: string[] = ['RESEAU', 'CODE', 'PAYS'];

  @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();
  }
}