import { CurrencyPipe, DatePipe } from '@angular/common';
import { Component, computed, input, output, signal } from '@angular/core';

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [CurrencyPipe, DatePipe],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly statusMessage = signal('');

  readonly title = input('Comprovante da transação');
  readonly statusLabel = input('Situação');
  readonly status = input('Concluída');
  readonly referenceLabel = input('Referência');
  readonly reference = input('TRX-2026-0001');
  readonly completedAtLabel = input('Concluída em');
  readonly completedAt = input('2026-07-26T12:00:00Z');
  readonly amountLabel = input('Valor');
  readonly amount = input(250.75);
  readonly currencyCode = input('BRL');
  readonly fromLabel = input('De');
  readonly fromAccount = input('Conta corrente **** 4098');
  readonly toLabel = input('Para');
  readonly recipient = input('Camila Souza');
  readonly descriptionLabel = input('Descrição');
  readonly description = input('Transferência');
  readonly copyReferenceLabel = input('Copiar referência');
  readonly downloadLabel = input('Baixar comprovante');
  readonly copiedMessage = input('Referência copiada.');
  readonly referenceCopy = output<string>();
  readonly receiptDownload = output<void>();

  protected readonly headingId = computed(() => `${this.instanceId}-heading`);

  protected copyReference(): void {
    this.statusMessage.set(this.copiedMessage());
    this.referenceCopy.emit(this.reference());
  }

  protected downloadReceipt(): void {
    this.receiptDownload.emit();
  }
}