import {
  Component,
  DestroyRef,
  input,
  OnDestroy,
  OnInit,
  TemplateRef,
  viewChild,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';

import {HeaderService} from '../../services';
import {NshmpTemplateAboutDialogComponent} from '../about-dialog/about-dialog.component';

@Component({
  imports: [MatDialogModule],
  selector: 'nshmp-template-about',
  standalone: true,
  styleUrl: './about.component.scss',
  templateUrl: './about.component.html',
})
export class NshmpTemplateAboutComponent implements OnInit, OnDestroy {
  readonly applicationName = input('');

  readonly applicationVersion = input('');

  templateRef = viewChild<TemplateRef<unknown>>('aboutTemplate');

  constructor(
    private headerService: HeaderService,
    private matDialog: MatDialog,
    private destroyRef: DestroyRef,
  ) {}

  ngOnInit(): void {
    this.headerService.aboutClicked
      .asObservable()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.matDialog.open(NshmpTemplateAboutDialogComponent, {
          data: {
            applicationName: this.applicationName(),
            applicationVersion: this.applicationVersion(),
            templateRef: this.templateRef,
          },
          height: '80%',
          maxHeight: '100%',
          maxWidth: '100%',
          panelClass: 'about-dialog',
          width: '90%',
        });
      });
  }

  ngOnDestroy(): void {
    this.headerService.reset();
  }
}