import {
  Component,
  Input,
  TemplateRef,
  Renderer2,
  ViewChild,
  AfterViewInit,
  OnInit,
  inject,
} from "@angular/core";

@Component({
  selector: "sam-title",
  template: `
    <ng-template #titleTemplate>
      <ng-content></ng-content>
    </ng-template>

    <ng-container [ngTemplateOutlet]="titleTpl"> </ng-container>
  `,
  standalone: false,
})
export class SamTitleComponent implements AfterViewInit, OnInit {
  private renderer = inject(Renderer2);

  @Input() public importance: string;
  @Input() public aligned: string;
  @Input() public weight: string;

  @ViewChild("titleTemplate", { static: true })
  titleTpl: TemplateRef<unknown>;

  css_classes: string = "sam title";

  ngOnInit() {
    this.css_classes += this.aligned ? ` ${this.aligned} aligned` : "";
    this.css_classes += this.weight ? ` ${this.weight}` : "";
  }

  ngAfterViewInit() {
    const template = this.titleTpl.elementRef.nativeElement;
    const parent = template.parentNode;
    const parentContent = parent.innerHTML;
    parent.innerHTML = "";
    const tag = this.renderer.createElement(this.getTitleTag(this.importance));
    this.renderer.setAttribute(tag, "class", this.css_classes);
    this.renderer.setProperty(tag, "innerHTML", parentContent);
    this.renderer.appendChild(parent, tag);
  }

  getTitleTag(importance: string): string {
    switch (importance) {
      case "highest": {
        return "h1";
      }
      case "high": {
        return "h2";
      }
      case "normal": {
        return "h3";
      }
      case "low": {
        return "h4";
      }
    }
  }
}