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

let nextId = 0;

@Directive({
  selector: 'ng-template[<%= camelize(name) %>Content]',
})
export class <%= classify(name) %>Content {
  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 content = contentChild(<%= classify(name) %>Content);
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  readonly label = input('Show details');
  readonly preserveContent = input(true, { transform: booleanAttribute });
  readonly expanded = model(false);

  private readonly rendered = signal(false);

  protected shouldRender(): boolean {
    return this.expanded() || (this.preserveContent() && this.rendered());
  }

  protected toggle(): void {
    this.rendered.set(true);
    this.expanded.update((value) => !value);
  }
}