import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';

import { ButtonComponent } from '../../../../../../shared/components/button/button.component';

@Component({
  selector: 'app-payment-verification-error',
  standalone: true,
  imports: [ButtonComponent],
  templateUrl: './payment-verification-error.component.html',
  styleUrl: './payment-verification-error.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PaymentVerificationErrorComponent {
  readonly paymentAmount = input<number>(0);
  readonly whatsappUrl = input<string | null>(null);
  readonly title = input<string | null>(null);

  protected readonly formattedAmount = computed(() =>
    new Intl.NumberFormat('es-AR', {
      style: 'currency',
      currency: 'ARS',
      maximumFractionDigits: 0,
    }).format(this.paymentAmount()),
  );
  protected readonly displayTitle = computed(
    () => this.title() ?? `No pudimos verificar el pago de ${this.formattedAmount()}.`,
  );

  protected openWhatsApp(): void {
    const url = this.whatsappUrl();

    if (url) {
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  }
}
