import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, 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 { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';

export interface Element {
  montant: number;
  numReversement: number;
  typeReversement: string;
  status: string;
  dateDemande: string;
  dateReversement: string;
}

const ELEMENT_DATA: Element[] = [
  {
    numReversement: 1,
    montant: 2000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 2,
    montant: 5000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 3,
    montant: 7000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 4,
    montant: 775000,
    typeReversement: 'Type',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 5,
    montant: 210000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 6,
    montant: 890000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 7,
    montant: 55000,
    typeReversement: 'cheque',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 8,
    montant: 7820000,
    typeReversement: 'cheque',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 9,
    montant: 1125000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 10,
    montant: 4725000,
    typeReversement: 'Verement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
];

@Component({
  selector: 'bgui-reversement',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    CommonModule,
    MatPaginator,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    CarouselComponent,
    MatFormFieldModule,
    MatCardModule,
    MatCardTitle,
    ReactiveFormsModule,
    MatInputModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    MatTableModule,
    MatPaginatorModule,
    RouterLink,
    FormsModule,
  ],
  templateUrl: './reversement.component.html',
  styleUrl: './reversement.component.scss',
})
export class ReversementComponent {
  displayedColumns: string[] = [
    'numReversement',
    'montant',
    'typeReversement',
    'status',
    'dateDemande',
    'dateReversement',
  ];
  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();
  }
}