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

interface <%= classify(name) %>Option {
  value: string;
  label: string;
  disabled?: boolean;
}

const DEFAULT_OPTIONS: readonly <%= classify(name) %>Option[] = [
  { value: '', label: 'Selecione uma opção', disabled: true },
  { value: 'design', label: 'Design' },
  { value: 'engineering', label: 'Engenharia' },
  { value: 'research', label: 'Pesquisa' },
];

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('Categoria');
  readonly hint = input('Escolha a opção que melhor atende sua necessidade.');
  readonly errorMessage = input('');
  readonly required = input(false, { transform: booleanAttribute });
  readonly disabled = input(false, { transform: booleanAttribute });
  readonly options = input<readonly <%= classify(name) %>Option[]>(DEFAULT_OPTIONS);
  readonly value = model('');

  protected readonly hasError = computed(() => this.errorMessage().trim().length > 0);

  protected readonly describedBy = computed(() => {
    const ids: string[] = [];
    if (this.hint().trim().length > 0) {
      ids.push(`${this.instanceId}-hint`);
    }
    if (this.hasError()) {
      ids.push(`${this.instanceId}-error`);
    }
    return ids.length > 0 ? ids.join(' ') : null;
  });

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