import { CommonModule } from '@angular/common';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDialog } from '@angular/material/dialog';
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 { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink, RouterOutlet } from '@angular/router';
import { ChargeDialogComponent } from '../../charges/charge-dialog/charge-dialog.component';

export interface Element {
  description: string;
  montant: string;
  charges: string;
  date: string;
}

const ELEMENT_DATA: Element[] = [
  {
    description: 'Barnoin test',
    montant: '100 000 XOF',
    charges: 'test',
    date: '2023-01-01',
  },
];

@Component({
  selector: 'bgui-consult-classe',
  standalone: true,
  imports: [
    RouterLink,
    MatCardModule,
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatTableModule,
    MatPaginatorModule,
    MatInputModule,
    MatMenuModule,
    MatSortModule,
    RouterOutlet,
  ],
  templateUrl: './consult-classe.component.html',
  styleUrls: ['./consult-classe.component.scss'],
})
export class ConsultClasseComponent implements AfterViewInit {
  displayedColumns: string[] = [
    'charges',
    'description',
    'montant',
    'date',
    'actions',
  ];

  constructor(private dialog: MatDialog) {}

  dataSource = new MatTableDataSource(ELEMENT_DATA);

  ngOnInit() {
    console.log(this.dataSource);
  }

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

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

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

  inviteCollaborator(element: Element) {
    // Implémentez la logique pour inviter un collaborateur
    console.log('Inviting collaborator for', element);
  }

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