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

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++}`;
  protected readonly accepted = signal(false);
  protected readonly statusMessage = signal('');

  readonly title = input('Aviso importante de conformidade');
  readonly message = input('Revise o aviso regulatório antes de continuar com esta operação financeira.');
  readonly severity = input('Aviso de risco');
  readonly consentLabel = input('Eu entendo e desejo continuar.');
  readonly confirmLabel = input('Continuar');
  readonly cancelLabel = input('Cancelar');
  readonly requiresConsent = input(true, { transform: booleanAttribute });
  readonly acknowledge = output<void>();
  readonly cancel = output<void>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly messageId = computed(() => `${this.instanceId}-message`);
  protected readonly consentId = computed(() => `${this.instanceId}-consent`);
  protected readonly confirmDisabled = computed(() => this.requiresConsent() && !this.accepted());

  protected updateConsent(event: Event): void {
    this.accepted.set((event.target as HTMLInputElement).checked);
  }

  protected acknowledgeAlert(): void {
    if (this.confirmDisabled()) {
      return;
    }

    this.statusMessage.set('Aviso de conformidade confirmado.');
    this.acknowledge.emit();
  }

  protected cancelAlert(): void {
    this.statusMessage.set('Aviso de conformidade cancelado.');
    this.cancel.emit();
  }
}