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

export interface <%= classify(name) %>Account {
  id: string;
  label: string;
  type: string;
  accountNumber: string;
  balance: string;
  currency: string;
  status?: string;
  disabled?: boolean;
}

const DEFAULT_ACCOUNTS: readonly <%= classify(name) %>Account[] = [
  {
    id: 'checking',
    label: 'Conta corrente principal',
    type: 'Conta corrente',
    accountNumber: 'Agência 0001 · Conta 12345-6',
    balance: 'R$ 12.480,20',
    currency: 'BRL',
    status: 'Disponível',
  },
  {
    id: 'savings',
    label: 'Poupança',
    type: 'Conta poupança',
    accountNumber: 'Agência 0001 · Conta 65432-1',
    balance: 'R$ 8.900,00',
    currency: 'BRL',
    status: 'Disponível',
  },
];

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 label = input('Selecionar conta');
  readonly hint = input('Escolha a conta que será usada nesta operação.');
  readonly emptyMessage = input('Nenhuma conta disponível.');
  readonly accounts = input<readonly <%= classify(name) %>Account[]>(DEFAULT_ACCOUNTS);
  readonly selectedId = model<string | null>(DEFAULT_ACCOUNTS[0]?.id ?? null);
  readonly accountSelect = output<<%= classify(name) %>Account>();

  protected readonly legendId = computed(() => `${this.instanceId}-legend`);
  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
  protected readonly groupDescribedBy = computed(() => (this.hint() ? this.hintId() : null));
  protected readonly selectedAccount = computed(() => this.accounts().find((account) => account.id === this.selectedId()) ?? null);

  protected accountId(account: <%= classify(name) %>Account): string {
    return `${this.instanceId}-${account.id}`;
  }

  protected accountDescriptionId(account: <%= classify(name) %>Account): string {
    return `${this.accountId(account)}-description`;
  }

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

  protected selectAccount(account: <%= classify(name) %>Account): void {
    if (account.disabled) {
      return;
    }

    this.selectedId.set(account.id);
    this.accountSelect.emit(account);
  }
}