/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
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 { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router';
import { UserService } from 'src/app/_services/utilisateur/user.service';

@Component({
  selector: 'bgui-transaction-tpe',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatTableModule,
    MatInputModule,
    MatIconModule,
    MatCardModule,
    RouterLink,
    FormsModule,
    MatPaginatorModule,
    MatSelectModule,
    ReactiveFormsModule,
  ],
  templateUrl: './transaction-tpe.component.html',
  styleUrl: './transaction-tpe.component.scss',
})
export class TransactionTpeComponent {
  onFirstFormSubmit() {
    throw new Error('Method not implemented.');
  }
  firstForm!: FormGroup;
  // tpeForm: FormGroup;

  countries = ["Cote d'Ivoire", 'France', 'USA'];
  operateurs = ['Orange', 'MTN', 'Moov'];
  operationTypes = ['Encaissement', 'Retrait'];

  constructor(
    private http: HttpClient,
    // private router: Router,
    private snackBar: MatSnackBar,
    private dialog: MatDialog,
    private userService: UserService,
    private fb: FormBuilder,
    private matdialog: MatDialog
  ) {
    this.firstForm = this.fb.group({
      pays: ['', Validators.required],
      operateur: ['', Validators.required],
      telephone: ['', [Validators.required, Validators.pattern('^[0-9]*$')]],
      transactionId: ['', Validators.required],
      typeOperation: ['', Validators.required],
    });
  }

  tpe: any[] = [
    {
      date: '2023-06-18',
      transaction: 'Transaction 1',
      tpe: 'TPE 1',
      groupe: 'Groupe 1',
      montant: 100,
      telephone: '1234567890',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-19',
      transaction: 'Transaction 2',
      tpe: 'TPE 2',
      groupe: 'Groupe 2',
      montant: 200,
      telephone: '0987654321',
      status: 'VALIDE',
    },
    // Ajout de 30 lignes supplémentaires
    {
      date: '2023-06-20',
      transaction: 'Transaction 3',
      tpe: 'TPE 3',
      groupe: 'Groupe 3',
      montant: 150,
      telephone: '0123456789',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-21',
      transaction: 'Transaction 4',
      tpe: 'TPE 4',
      groupe: 'Groupe 4',
      montant: 180,
      telephone: '9876543210',
      status: 'VALIDE',
    },
    {
      date: '2023-06-18',
      transaction: 'Transaction 1',
      tpe: 'TPE 1',
      groupe: 'Groupe 1',
      montant: 100,
      telephone: '1234567890',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-19',
      transaction: 'Transaction 2',
      tpe: 'TPE 2',
      groupe: 'Groupe 2',
      montant: 200,
      telephone: '0987654321',
      status: 'VALIDE',
    },
    // Ajout de 30 lignes supplémentaires
    {
      date: '2023-06-20',
      transaction: 'Transaction 3',
      tpe: 'TPE 3',
      groupe: 'Groupe 3',
      montant: 150,
      telephone: '0123456789',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-21',
      transaction: 'Transaction 4',
      tpe: 'TPE 4',
      groupe: 'Groupe 4',
      montant: 180,
      telephone: '9876543210',
      status: 'VALIDE',
    },
    // Ajout de 5 lignes supplémentaires
    {
      date: '2023-06-22',
      transaction: 'Transaction 5',
      tpe: 'TPE 5',
      groupe: 'Groupe 5',
      montant: 120,
      telephone: '5555555555',
      status: 'VALIDE',
    },
    {
      date: '2023-06-23',
      transaction: 'Transaction 6',
      tpe: 'TPE 6',
      groupe: 'Groupe 6',
      montant: 250,
      telephone: '6666666666',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-24',
      transaction: 'Transaction 7',
      tpe: 'TPE 7',
      groupe: 'Groupe 7',
      montant: 300,
      telephone: '7777777777',
      status: 'VALIDE',
    },
    {
      date: '2023-06-25',
      transaction: 'Transaction 8',
      tpe: 'TPE 8',
      groupe: 'Groupe 8',
      montant: 280,
      telephone: '8888888888',
      status: 'INVALIDE',
    },
    {
      date: '2023-06-26',
      transaction: 'Transaction 9',
      tpe: 'TPE 9',
      groupe: 'Groupe 9',
      montant: 150,
      telephone: '9999999999',
      status: 'VALIDE',
    },
  ];

  dataSource = new MatTableDataSource<any>(this.tpe);
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  displayedColumns: string[] = [
    'date',
    'transaction',
    'tpe',
    'groupe',
    'montant',
    'telephone',
    'status',
    'action',
  ];

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

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

  onSubmit() {
    if (this.firstForm.valid) {
      console.log('Form submitted:', this.firstForm.value);
      // Add logic here to save or process the form data
    } else {
      console.error('Form is invalid');
    }
  }
}