import { Component, type OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component';
import { RouterLink, RouterOutlet } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import {
  IMerchantData,
  ITransaction,
  ITypeOperateur,
} from '../_interfaces/trafics/transaction/transaction';
import { TransactionService } from '../_services/trafics/transaction/transaction.service';

@Component({
  selector: 'bgui-admin-test',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    CommonModule,
    HttpClientModule,
    RouterLink,
    FormsModule,
    CommonModule,
    PagetitleComponent,
    RouterOutlet,
  ],
  templateUrl: './admin-test.component.html',
  styleUrls: ['./admin-test.component.scss'],
})
export class AdminTestComponent implements OnInit {
  private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';

  breadCrumbItems: Array<{}> | undefined;
  respTransaction: IMerchantData | undefined = undefined;
  transactions: ITransaction[] = [];
  operateurs: ITypeOperateur[] = [];
  // marchnad: IMerchantData[] = [];
  selectedOperateur: string = '';
  constructor(
    private httpClient: HttpClient,
    public transactionService: TransactionService
    //public operateur: IOperateur
  ) {}
  ngOnInit(): void {
    this.transactionService.getDataTable().subscribe(data => {
      this.respTransaction = data;
      console.log('respTransaction===>', this.respTransaction);
      // this.respTransaction =  JSON.stringify(this.respTransaction);
      //console.log('Response==>',this.respTransaction);

      this.transactions = this.respTransaction?.last_five_transactions;
      console.log('transactions==>', this.transactions);

      this.operateurs = this.respTransaction?.type_operateur;

      console.log('typeOpreateur===>', this.operateurs);
    });
  }

  displayedColumns: string[] = [
    'transaction_id',
    //'type_paiement',
    'type_paiement_label',
    'marchand',
    'service',
    'montant',
    'date',
    'commentaire',
    'etat',
    'status',
    'reference',
  ];

  dataSource = new MatTableDataSource(this.transactions);
}