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

export interface <%= classify(name) %>Beneficiary {
  id: string;
  name: string;
  institution: string;
  accountLabel: string;
  documentLabel?: string;
  status?: string;
}

const DEFAULT_BENEFICIARIES: readonly <%= classify(name) %>Beneficiary[] = [
  {
    id: 'beneficiary-1',
    name: 'Camila Souza',
    institution: 'Banco Exemplo',
    accountLabel: 'Conta corrente **** 4098',
    documentLabel: 'Conta pessoa física',
    status: 'Verificado',
  },
  {
    id: 'beneficiary-2',
    name: 'Acme Corp',
    institution: 'Banco Empresarial',
    accountLabel: 'Conta empresarial **** 2810',
    documentLabel: 'Conta pessoa jurídica',
    status: 'Verificado',
  },
];

let nextId = 0;

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

  readonly title = input('Destinatários salvos');
  readonly emptyMessage = input('Nenhum destinatário salvo encontrado.');
  readonly beneficiaries = input<readonly <%= classify(name) %>Beneficiary[]>(DEFAULT_BENEFICIARIES);
  readonly selectedId = model<string | null>(null);
  readonly beneficiarySelect = output<<%= classify(name) %>Beneficiary>();

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

  protected isSelected(beneficiary: <%= classify(name) %>Beneficiary): boolean {
    return this.selectedId() === beneficiary.id;
  }

  protected selectBeneficiary(beneficiary: <%= classify(name) %>Beneficiary): void {
    this.selectedId.set(beneficiary.id);
    this.beneficiarySelect.emit(beneficiary);
  }
}