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

let nextId = 0;

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

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

@Directive({
  selector: 'ng-template[<%= camelize(name) %>Trailing]',
})
export class <%= classify(name) %>Trailing {
  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 leading = contentChild(<%= classify(name) %>Leading);
  protected readonly labelTemplate = contentChild(<%= classify(name) %>Label);
  protected readonly trailing = contentChild(<%= classify(name) %>Trailing);
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;

  readonly label = input('Continue');
  readonly variant = input<string>('primary');
  readonly size = input<string>('md');
  readonly disabled = input(false);
  readonly busy = input(false);
  readonly pressed = input<boolean | null>(null);
  readonly buttonClick = output<MouseEvent>();

  protected readonly buttonClasses = computed(() => [
    '<%= dasherize(name) %>',
    `<%= dasherize(name) %>--${this.variant()}`,
    `<%= dasherize(name) %>--${this.size()}`,
  ].join(' '));

  protected readonly ariaPressed = computed(() => {
    const pressed = this.pressed();
    return pressed === null ? null : String(pressed);
  });

  protected handleClick(event: MouseEvent): void {
    if (this.disabled() || this.busy()) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }

    this.buttonClick.emit(event);
  }
}