import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
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 { MatIconModule } from '@angular/material/icon';
import { RouterLink, RouterOutlet } from '@angular/router';
import { CarouselComponent } from '../shared/carousel/carousel.component';
import { MatMenuModule } from '@angular/material/menu';
import { HttpClient } from '@angular/common/http';

export interface IUsers {
  id: number;
  email: string;
  nom: string;
  prenom: string;
  actions: string;
}

const ELEMENT_DATA: IUsers[] = [
  {
    id: 1,
    nom: 'zaho',
    prenom: 'qadi',
    email: 'mrtlest@mail.com',
    actions: '',
  },
  {
    id: 2,
    nom: 'taho',
    prenom: 'vadi',
    email: 'mrteust@mail.com',
    actions: '',
  },
  {
    id: 3,
    nom: 'zaho',
    prenom: 'dadi',
    email: 'mrtetst@mail.com',
    actions: '',
  },
  {
    id: 4,
    nom: 'kaho',
    prenom: 'uadi',
    email: 'mrtesbbt@mail.com',
    actions: '',
  },
  {
    id: 5,
    nom: 'paho',
    prenom: 'fadi',
    email: 'mrtessst@mail.com',
    actions: '',
  },
  {
    id: 6,
    nom: 'haho',
    prenom: 'padi',
    email: 'mrtesxxt@mail.com',
    actions: '',
  },
];

@Component({
  selector: 'bgui-utilisateurs',
  standalone: true,
  imports: [
    CommonModule,
    MatPaginator,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    CarouselComponent,
    MatCardModule,
    MatCardTitle,
    ReactiveFormsModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    RouterOutlet,
    MatPaginatorModule,
    RouterLink,
    FormsModule,
    MatMenuModule,
  ],
  providers: [],
  templateUrl: './utilisateurs.component.html',
  styleUrl: './utilisateurs.component.scss',
})
export class UtilisateursComponent {
  constructor(private http: HttpClient) {}

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dataTypePaiements: any[] = [];

  ngOnInit(): void {
    this.http
      .get('http://192.168.1.223:8000/operateur/')
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      .subscribe((results: any) => {
        console.log('results==>', results);
        this.dataTypePaiements = results.results;

        console.log('dataTypePaiements===>', this.dataTypePaiements);
      });
  }
  editUser() {
    throw new Error('Method not implemented.');
  }
  deleteUser() {
    throw new Error('Method not implemented.');
  }
  displayedColumns: string[] = ['id', 'nom', 'prenom', 'email', 'actions'];

  dataSource = new MatTableDataSource(ELEMENT_DATA);

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