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

let nextId = 0;

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

  readonly title = input('Conta corrente');
  readonly accountName = input('Conta corrente do dia a dia');
  readonly accountLabel = input('Conta');
  readonly accountNumber = input('**** 1234');
  readonly currencyCode = input('BRL');
  readonly balanceLabel = input('Saldo atual');
  readonly balance = input(12840.36);
  readonly availableBalanceLabel = input('Saldo disponível');
  readonly availableBalance = input(12300);
  readonly statusLabel = input('Ativo');
  readonly hiddenBalanceText = input('Oculto');
  readonly hideBalanceLabel = input('Ocultar saldos');
  readonly showBalanceLabel = input('Mostrar saldos');

  protected readonly headingId = computed(() => `${this.instanceId}-heading`);
  protected readonly balanceRegionId = computed(() => `${this.instanceId}-balances`);
  protected readonly toggleLabel = computed(() => this.balancesVisible() ? this.hideBalanceLabel() : this.showBalanceLabel());

  protected toggleBalances(): void {
    this.balancesVisible.update((visible) => !visible);
  }
}