import { Component, ViewChild, type OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { MatPaginator, 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 { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { Chart, registerables } from 'chart.js';
import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component';
//  import Chart from 'chart.js/auto';
@Component({
  selector: 'bgui-admin-test',
  standalone: true,
  imports: [
    MatTableModule,
    MatPaginatorModule,
    CommonModule,
    RouterLink,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatListModule,
    PagetitleComponent,
  ],
  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<{}> = [{ label: 'Dashboard', url: '/dashboard' }];

  // @Input() breadcrumbItems: any;
  // @Input() title: string | undefined;

  respTransaction: IMerchantData | undefined = undefined;
  transactions: ITransaction[] = [];
  stat_transactions: ITransaction[] = [];
  operateurs: ITypeOperateur[] = [];
  // marchnad: IMerchantData[] = [];
  selectedOperateur: string = '';

  currentDateFormatted!: string;
  startDate!: string;

  transaction_initialisation: ITransaction[] = [];
  transaction_processing: ITransaction[] = [];
  transaction_cancelled: ITransaction[] = [];
  transaction_initiated: ITransaction[] = [];

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  constructor(
    private httpClient: HttpClient,
    public transactionService: TransactionService
    //public operateur: IOperateur
  ) {
    Chart.register(...registerables);
  }
  ngOnInit(): void {
    this.setCurrentDate();

    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.transactionService.getAll().subscribe((donnees: ITransaction[]) => {
      this.stat_transactions = donnees;
      console.log('transactions=stat=>', this.stat_transactions);
      this.dataSource.data = this.stat_transactions;
      this.filterTransactions();
    });

    this.initChart();
  }

  setCurrentDate(): void {
    const currentDate = new Date();
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const options = { year: 'numeric', month: 'short', day: 'numeric' };
    this.currentDateFormatted = currentDate.toLocaleDateString(
      'fr-FR'
      // options
    ); // Format "01 Mai 2024"
    // Exemple de startDate
    this.startDate = new Date('2024-01-01').toLocaleDateString(
      'fr-FR'
      // options
    ); // Format "01 Mai 2024"
  }

  filterTransactions(): void {
    console.log('Filtering transactions', this.stat_transactions);

    this.transaction_initialisation = this.stat_transactions.filter(
      transaction => transaction.status === 'initialisation'
    );
    console.log(
      'transaction_initialisation===>',
      this.transaction_initialisation
    );

    console.log(
      'transaction_initialisation_date===>',
      this.transaction_initialisation[0].date
    );

    this.transaction_processing = this.stat_transactions.filter(
      transaction => transaction.status === 'processing'
    );
    console.log('transaction_processing===>', this.transaction_processing);

    this.transaction_cancelled = this.stat_transactions.filter(
      transaction => transaction.status === 'cancelled'
    );
    console.log('transaction_cancelled===>', this.transaction_cancelled);

    this.transaction_initiated = this.stat_transactions.filter(
      transaction => transaction.status === 'INITIATED'
    );
    console.log('transaction_initiated====>', this.transaction_initiated);
  }

  displayedColumns: string[] = [
    'date',
    'reference',
    'montant',
    'type_paiement_label',
    'service',
    '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',
  //           // eslint-disable-next-line no-sparse-arrays, prettier/prettier
  //           data: [
  //             0, 0, 2, 2, 1, 3, 3, 3, 1, 3, 3, 1, 1, 0, 0, 0, 1, 0, 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',
  //           },
  //         },
  //       },
  //     },
  //   });
  // }

  initChart(): void {
    const ctx = document.getElementById('salesStatistics') as HTMLCanvasElement;
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: this.transactions.map(transaction => transaction.date),
        datasets: [
          {
            label: 'Initiée',
            borderColor: '#0fac81',
            backgroundColor: '#0fac81',
            data: this.transaction_initialisation.map(
              transaction => transaction.status
            ),
            fill: false,
          },
          {
            label: 'En cours',
            borderColor: '#eb6459',
            backgroundColor: '#eb6459',
            data: this.transaction_processing.map(
              transaction => transaction.status
            ),
            fill: false,
          },
          {
            label: 'Annulée',
            borderColor: '#f6c23e',
            backgroundColor: '#f6c23e',
            data: this.transaction_cancelled.map(
              transaction => transaction.status
            ),
            fill: false,
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true,
            title: {
              display: true,
              text: 'Dates des transactions',
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Statut',
            },
          },
        },
      },
    });
  }

  getColorStatus(status: string): string {
    switch (status) {
      case 'SUCCESS':
        return 'success-status';
      case 'FAILED':
        return 'failure-status';
      case 'INITIATED':
        return 'pending-status';
      default:
        return this.transactions.values.toString();
    }
  }
}