import { NgTemplateOutlet } from '@angular/common';
import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input } from '@angular/core';

let nextId = 0;

@Directive({
  selector: 'ng-template[<%= camelize(name) %>Label]',
})
export class <%= classify(name) %>Label {
  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
}

@Component({
  selector: '<%= selector %>',
  imports: [NgTemplateOutlet],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly labelTemplate = contentChild(<%= classify(name) %>Label);
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;

  readonly label = input('Badge');
  readonly variant = input<string>('neutral');
  readonly size = input<string>('md');
  readonly pill = input(false, { transform: booleanAttribute });
  readonly dot = input(false, { transform: booleanAttribute });
  readonly decorative = input(false, { transform: booleanAttribute });
  readonly accessibleLabel = input('');

  protected readonly badgeClasses = computed(() => [
    '<%= dasherize(name) %>',
    `<%= dasherize(name) %>--${this.variant()}`,
    `<%= dasherize(name) %>--${this.size()}`,
    this.pill() ? '<%= dasherize(name) %>--pill' : '',
    this.dot() ? '<%= dasherize(name) %>--dot' : '',
  ].filter(Boolean).join(' '));

  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);

  protected readonly ariaLabel = computed(() => {
    if (this.decorative()) {
      return null;
    }

    const label = this.accessibleLabel().trim();
    return label.length > 0 ? label : null;
  });
}