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

export interface <%= classify(name) %>Item {
  id: string;
  label: string;
  value: string;
}

const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
  { id: 'recipient', label: 'Destinatário', value: 'Camila Souza' },
  { id: 'source', label: 'Conta de origem', value: 'Conta corrente **** 4098' },
  { id: 'schedule', label: 'Quando', value: 'Hoje' },
];

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++}`;

  readonly title = input('Revisar e confirmar');
  readonly description = input('Verifique todos os detalhes antes de confirmar esta operação bancária.');
  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
  readonly totalLabel = input('Valor total');
  readonly totalAmount = input(250.75);
  readonly currencyCode = input('BRL');
  readonly confirmLabel = input('Confirmar');
  readonly cancelLabel = input('Cancelar');
  readonly disabled = input(false);
  readonly busy = input(false);
  readonly confirm = output<void>();
  readonly cancel = output<void>();

  protected readonly headingId = computed(() => `${this.instanceId}-heading`);
  protected readonly descriptionId = computed(() => `${this.instanceId}-description`);
  protected readonly describedBy = computed(() => this.description() ? this.descriptionId() : null);

  protected confirmAction(): void {
    if (this.disabled() || this.busy()) {
      return;
    }

    this.confirm.emit();
  }

  protected cancelAction(): void {
    if (this.disabled() || this.busy()) {
      return;
    }

    this.cancel.emit();
  }
}