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';
import { environment } from 'src/environments/environment';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatListModule } from '@angular/material/list';
import { Chart, registerables } from 'chart.js';

@Component({
  selector: 'bgui-admin-test',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    CommonModule,
    HttpClientModule,
    RouterLink,
    FormsModule,
    PagetitleComponent,
    RouterOutlet,
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatInputModule,
    MatTooltipModule,
    MatListModule,
  ],
  templateUrl: './admin-test.component.html',
  styleUrls: ['./admin-test.component.scss'],
})
export class AdminTestComponent implements OnInit {
  private SUrl = `${environment.apiBaseUrl}/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
  ) {
    Chart.register(...registerables);
  }
  ngOnInit(): void {
    this.transactionService.getDataTable().subscribe(data => {
      this.respTransaction = data;
      console.log('respTransaction===>', 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);
    });

    this.initChart();
  }

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

  dataSource = new MatTableDataSource(this.transactions);

  initChart() {
    const ctx = document.getElementById('salesStatistics') as HTMLCanvasElement;
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: [
          '01 Mai',
          '02 Mai',
          '03 Mai',
          '04 Mai',
          '05 Mai',
          '06 Mai',
          '07 Mai',
          '08 Mai',
          '09 Mai',
          '10 Mai',
          '11 Mai',
          '12 Mai',
          '13 Mai',
          '14 Mai',
          '15 Mai',
          '16 Mai',
          '17 Mai',
          '18 Mai',
          '19 Mai',
          '20 Mai',
          '21 Mai',
          '22 Mai',
          '23 Mai',
          '14 Mai',
          '25 Mai',
          '26 Mai',
          '27 Mai',
          '28 Mai',
          '29 Mai',
          '30 Mai',
          '31 Mai',
        ],
        datasets: [
          {
            label: 'Transaction',
            borderColor: '#0fac81',
            backgroundColor: '#0fac81',
            data: [
              5, 10, 20, 22, 30, 40, 45, 50, 50, 53, 55, 60, 65, 70, 75, 70, 65,
              60, 58, 60, 65, 70, 88,
            ],
            fill: false,
          },
          {
            label: 'Transaction Annulé',
            borderColor: '#eb6459',
            backgroundColor: '#eb6459',
            data: [
              0,
              0,
              2,
              2,
              1,
              3,
              3,
              3,
              1,
              3,
              3,
              1,
              1,
              0,
              0,
              0,
              1,
              ,
              2,
              1,
              1,
              2,
              2,
            ],
            fill: false,
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true,
            title: {
              display: true,
              text: 'Date',
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Nombre de Transactions',
            },
          },
        },
      },
    });
  }
}