import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  DestroyRef,
  ViewChild,
  ViewContainerRef,
  ViewEncapsulation,
  inject
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';
import { TalyFrameBannerService } from '../../services/banner.service';

@Component({
  selector: 'frame-banner',
  template: `<ng-container #container></ng-container>`,
  standalone: true,
  // the .block-wrapper is projected into this component and loses its styles
  // so we re-apply the inline-margin here to center the banner
  styles: [
    `
      .is-stacked,
      .is-centered {
        .block-wrapper {
          margin-inline: auto;
        }
      }
    `
  ],
  // we need to disable view encapsulation to apply the styles above.
  // we tried without, by using the :host-context selector, but it didn't work
  // in production builds. See https://github.developer.allianz.io/ilt/taly-workspace/issues/2302
  encapsulation: ViewEncapsulation.None
})
export class BannerComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  private container!: ViewContainerRef;

  private bannerService = inject(TalyFrameBannerService);
  private destroyRef = inject(DestroyRef);
  private cdr = inject(ChangeDetectorRef);

  ngAfterViewInit() {
    this.bannerService.template$
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        tap((template) => {
          this.container.clear();
          if (template) {
            this.container.createEmbeddedView(template);
          }
          this.cdr.detectChanges();
        })
      )
      .subscribe();
  }
}