import { Component, DestroyRef, inject, input, signal } from '@angular/core';

const AUTO_DISMISS_MS = 5000;

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  private dismissTimeout: ReturnType<typeof setTimeout> | undefined;

  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly visible = signal(false);

  readonly triggerLabel = input('Save');
  readonly message = input('Your changes have been saved.');
  readonly dismissLabel = input('Dismiss');

  constructor() {
    inject(DestroyRef).onDestroy(() => clearTimeout(this.dismissTimeout));
  }

  protected show(): void {
    this.visible.set(true);
    clearTimeout(this.dismissTimeout);
    this.dismissTimeout = setTimeout(() => this.visible.set(false), AUTO_DISMISS_MS);
  }

  protected dismiss(): void {
    clearTimeout(this.dismissTimeout);
    this.visible.set(false);
  }
}