import { Component } from '@angular/core';
import { Chartjs } from '@app/components/chartjs';
import { ChartConfiguration } from 'chart.js';
import { getColor } from '@/app/utils/color-utils';

@Component({
  selector: 'app-revenue-chart',
  imports: [Chartjs],
  template: `
    <div class="card">
      <div class="card-header justify-content-between align-items-center border-dashed">
        <h4 class="card-title mb-0">Revenue Mensuel</h4>
        <div class="dropdown">
          <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Octobre 2024
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Septembre 2024</a></li>
            <li><a class="dropdown-item" href="#">Août 2024</a></li>
            <li><a class="dropdown-item" href="#">Juillet 2024</a></li>
          </ul>
        </div>
      </div>
      <div class="card-body">
        <app-chartjs [getOptions]="revenueChart" [height]="300" />
        
        <div class="row text-center mt-4">
          <div class="col-3">
            <small class="text-muted">Semaine 1</small>
            <div class="fw-bold text-primary">175K XOF</div>
          </div>
          <div class="col-3">
            <small class="text-muted">Semaine 2</small>
            <div class="fw-bold text-success">125K XOF</div>
          </div>
          <div class="col-3">
            <small class="text-muted">Semaine 3</small>
            <div class="fw-bold text-info">105K XOF</div>
          </div>
          <div class="col-3">
            <small class="text-muted">Semaine 4</small>
            <div class="fw-bold text-warning">85K XOF</div>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class RevenueChart {
  public revenueChart = (): ChartConfiguration => ({
    type: 'bar',
    data: {
      labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],
      datasets: [
        {
          label: 'Revenue (K XOF)',
          data: [175, 125, 105, 85],
          backgroundColor: getColor('chart-primary'),
          borderRadius: 6,
          borderSkipped: false,
        },
      ],
    },
    options: {
      plugins: {
        legend: { display: false },
      },
      scales: {
        x: {
          grid: { display: false },
        },
        y: {
          beginAtZero: true,
          ticks: {
            callback: function(value) {
              return value + 'K';
            }
          }
        },
      },
    },
  });
}