import { formatWithCurrency } from '@/utils';
import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'pos-statistics-invoice-type-card',
  templateUrl: 'invoice-type-card.component.html',
  imports: [CommonModule],
})
export class PosStatisticsInvoiceTypeCardComponent {
  @Input() type: 'all' | 'success' | 'failure' | 'notSended' | 'pending' | 'credit' = 'all';
  @Input() count?: number = 0;
  @Input() totalAmount?: number = 0;
  @Input() totalTaxAmount?: number = 0;
  @Input() loading = false;
  @Input() invoicesRoute = '';

  @Output() onClick = new EventEmitter<void>();

  get formattedTotalAmount() {
    return formatWithCurrency(this.totalAmount || 0);
  }
  get formattedTotalTax() {
    return formatWithCurrency(this.totalTaxAmount || 0);
  }

  readonly preparedInfo = computed(() => {
    switch (this.type) {
      case 'all':
        return {
          title: 'همه',
          icon: 'close',
          bgColor: '#6B72801A',
          borderColor: '#6B7280',
        };
      case 'success':
        return {
          title: 'تایید شده',
          icon: 'check',
          bgColor: '#22C55E1A',
          borderColor: '#22C55E',
        };
      case 'failure':
        return {
          title: 'خطادار',
          icon: 'times',
          bgColor: '#EF44441A',
          borderColor: '#EF4444',
        };
      case 'notSended':
        return {
          title: 'ارسال نشده',
          icon: 'clock',
          bgColor: '#F59E0B1A',
          borderColor: '#F59E0B',
        };
      case 'pending':
        return {
          title: 'انتظار ارسال',
          icon: 'clock',
          bgColor: '#3B82F61A',
          borderColor: '#3B82F6',
        };
      case 'credit':
        return {
          title: 'اعتبار',
          icon: 'credit-card',
          bgColor: '#8B5CF61A',
          borderColor: '#8B5CF6',
        };
    }
  });

  showDetails() {
    this.onClick.emit();
  }
}
