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

type <%= classify(name) %>Type = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';

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('Email address');
  readonly inputType = input<<%= classify(name) %>Type>('email');
  readonly placeholder = input('name@example.com');
  readonly hint = input('Use the email address associated with your account.');
  readonly error = input('');
  readonly required = input(false);
  readonly disabled = input(false);
  readonly readOnly = input(false);
  readonly autocomplete = input('email');
  readonly value = model('');

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

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

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

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

    return ids.length > 0 ? ids.join(' ') : null;
  });

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