/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink, RouterOutlet } from '@angular/router';
import { CreateTpeComponent } from 'src/app/tpe/create-tpe/create-tpe.component';
import { ClasseDialogComponent } from './classe-dialog/classe-dialog.component';
import { MatDialog } from '@angular/material/dialog';

export interface Element {
  classes: string;
  cycles: string;
  charges: string;
  date: string;
  actions: string;
}

export interface ElementData {
  classes: string;
  cycles: string;
  charges: number;
  date: string;
}

const ELEMENT_DATA: Element[] = [
  {
    classes: 'Classe 1',
    cycles: 'Cycle 1',
    charges: 'Charge 1',
    date: '2023-01-01',
    actions: 'Action 1',
  },
  {
    classes: 'Classe 2',
    cycles: 'Cycle 2',
    charges: 'Charge 2',
    date: '2023-02-01',
    actions: 'Action 2',
  },
  {
    classes: 'Classe 3',
    cycles: 'Cycle 3',
    charges: 'Charge 3',
    date: '2023-03-01',
    actions: 'Action 3',
  },
  {
    classes: 'Classe 4',
    cycles: 'Cycle 4',
    charges: 'Charge 4',
    date: '2023-04-01',
    actions: 'Action 4',
  },
  {
    classes: 'Classe 5',
    cycles: 'Cycle 5',
    charges: 'Charge 5',
    date: '2023-05-01',
    actions: 'Action 5',
  },
  {
    classes: 'Classe 6',
    cycles: 'Cycle 6',
    charges: 'Charge 6',
    date: '2023-06-01',
    actions: 'Action 6',
  },
  {
    classes: 'Classe 7',
    cycles: 'Cycle 7',
    charges: 'Charge 7',
    date: '2023-07-01',
    actions: 'Action 7',
  },
  {
    classes: 'Classe 8',
    cycles: 'Cycle 8',
    charges: 'Charge 8',
    date: '2023-08-01',
    actions: 'Action 8',
  },
  {
    classes: 'Classe 9',
    cycles: 'Cycle 9',
    charges: 'Charge 9',
    date: '2023-09-01',
    actions: 'Action 9',
  },
  {
    classes: 'Classe 10',
    cycles: 'Cycle 10',
    charges: 'Charge 10',
    date: '2023-10-01',
    actions: 'Action 10',
  },
];
const ELEMENT_DATAS: ElementData[] = [
  { classes: 'Class 1', cycles: 'Cycle 1', charges: 100, date: '2022-01-01' },
  { classes: 'Class 2', cycles: 'Cycle 2', charges: 200, date: '2022-02-01' },
  { classes: 'Class 3', cycles: 'Cycle 3', charges: 300, date: '2022-03-01' },
  { classes: 'Class 4', cycles: 'Cycle 4', charges: 400, date: '2022-04-01' },
  { classes: 'Class 5', cycles: 'Cycle 5', charges: 500, date: '2022-05-01' },
  { classes: 'Class 6', cycles: 'Cycle 6', charges: 600, date: '2022-06-01' },
  { classes: 'Class 7', cycles: 'Cycle 7', charges: 700, date: '2022-07-01' },
  { classes: 'Class 8', cycles: 'Cycle 8', charges: 800, date: '2022-08-01' },
  { classes: 'Class 9', cycles: 'Cycle 9', charges: 900, date: '2022-09-01' },
  {
    classes: 'Class 10',
    cycles: 'Cycle 10',
    charges: 1000,
    date: '2022-10-01',
  },
];

@Component({
  selector: 'bgui-classes',
  standalone: true,
  imports: [
    RouterLink,
    MatCardModule,
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatTableModule,
    FormsModule,
    MatPaginatorModule,
    MatInputModule,
    MatMenuModule,
    RouterOutlet,
    ReactiveFormsModule,
  ],
  templateUrl: './classes.component.html',
  styleUrl: './classes.component.scss',
})
export class ClassesComponent {
  constructor(private dialog: MatDialog) {}
  inviteCollaborator(element: any) {
    // Implémentez la logique pour inviter un collaborateur
    console.log('Inviting collaborator for', element);
  }

  editItem(element: any) {
    // Implémentez la logique pour éditer un élément
    console.log('Editing item', element);
  }

  deleteItem(element: any) {
    // Implémentez la logique pour supprimer un élément
    console.log('Deleting item', element);
  }

  setDefault(_t101: any) {
    throw new Error('Method not implemented.');
  }
  displayedColumn: string[] = [
    'classes',
    'cycles',
    'charges',
    'date',
    'actions',
  ];

  displayedColumns: string[] = ['cycles', 'classes', 'charges', 'date'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  dataSources = new MatTableDataSource(ELEMENT_DATAS);

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  element: any;
  elements: any;
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    const filterValues = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    this.dataSources.filter = filterValue.trim().toLowerCase();
  }

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

  public openDialog() {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const dialogRef = this.dialog.open(ClasseDialogComponent, {
      width: '800px',
      height: '1000px',
    });
  }
}