import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { RouterLink } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTabsModule } from '@angular/material/tabs';

export interface Element {
  groupe: string;
  nom: string;
  service: string;
  solde: number;
  fonction: string;
  statut: string;
  activite: string;
}

const ELEMENT_DATA: Element[] = [
  {
    groupe: 'A',
    nom: 'John Doe',
    service: 'Service A',
    solde: 1000,
    fonction: 'Fonction 1',
    statut: 'Actif',
    activite: 'Activité 1',
  },
  {
    groupe: 'B',
    nom: 'Jane Doe',
    service: 'Service B',
    solde: 2000,
    fonction: 'Fonction 2',
    statut: 'Inactif',
    activite: 'Activité 2',
  },
  {
    groupe: 'C',
    nom: 'Bob Smith',
    service: 'Service C',
    solde: 3000,
    fonction: 'Fonction 3',
    statut: 'Actif',
    activite: 'Activité 3',
  },
  {
    groupe: 'C',
    nom: 'John Doe',
    service: 'Service A',
    solde: 1000,
    fonction: 'Fonction 1',
    statut: 'Actif',
    activite: 'Activité 1',
  },
  {
    groupe: 'B',
    nom: 'Jane Doe',
    service: 'Service B',
    solde: 2000,
    fonction: 'Fonction 2',
    statut: 'Inactif',
    activite: 'Activité 2',
  },
  {
    groupe: 'A',
    nom: 'Bob Smith',
    service: 'Service A',
    solde: 3500,
    fonction: 'Fonction 3',
    statut: 'Actif',
    activite: 'Activité 3',
  },
];

@Component({
  selector: 'bgui-gerer-mes-tpe',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatTableModule,
    MatInputModule,
    MatIconModule,
    RouterLink,
    FormsModule,
    MatPaginatorModule,
  ],
  templateUrl: './gerer-mes-tpe.component.html',
  styleUrl: './gerer-mes-tpe.component.scss',
})
export class GererMesTpeComponent {
  onSearch() {
    throw new Error('Method not implemented.');
  }
  displayedColumns: string[] = [
    'groupe',
    'nom',
    'service',
    'solde',
    'fonction',
    'statut',
    'activite',
    'action',
  ];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  element: any;
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

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