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

type <%= classify(name) %>InputMode = 'decimal' | 'numeric';

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('Valor');
  readonly currencyCode = input('BRL');
  readonly currencyLabel = input('Real brasileiro');
  readonly placeholder = input('0,00');
  readonly hint = input('Informe o valor usando números e um separador decimal.');
  readonly error = input('');
  readonly required = input(false);
  readonly disabled = input(false);
  readonly readOnly = input(false);
  readonly autocomplete = input('transaction-amount');
  readonly inputMode = input<<%= classify(name) %>InputMode>('decimal');
  readonly value = model('');

  protected readonly controlId = computed(() => `${this.instanceId}-control`);
  protected readonly currencyId = computed(() => `${this.instanceId}-currency`);
  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
  protected readonly errorId = computed(() => `${this.instanceId}-error`);

  protected readonly describedBy = computed(() => {
    const ids = [this.currencyId()];

    if (this.hint()) {
      ids.push(this.hintId());
    }

    if (this.error()) {
      ids.push(this.errorId());
    }

    return ids.join(' ');
  });

  protected updateValue(event: Event): void {
    this.value.set((event.target as HTMLInputElement).value);
  }
}