import {
  AfterViewInit,
  Component,
  EmbeddedViewRef,
  ViewChild,
  ViewContainerRef
} from '@angular/core';
import { combineLatest } from 'rxjs';
import { distinctUntilChanged, tap } from 'rxjs/operators';
import { SidebarTemplateSet, TalyFrameSidebarService } from '../../services/sidebar.service';

@Component({
  selector: 'frame-sidebar',
  styles: [
    `
      :host {
        display: block;
      }
    `
  ],
  template: `<ng-container #container></ng-container>`,
  standalone: false
})
export class SidebarComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
  private _viewRefs: EmbeddedViewRef<unknown>[] = [];
  render = false;

  constructor(private _sidebarService: TalyFrameSidebarService) {}

  _renderTemplates(templates: SidebarTemplateSet) {
    this._clearContent();

    templates.forEach((template) => {
      const viewRef = this.container.createEmbeddedView(template);
      this._viewRefs.push(viewRef);
    });
  }

  ngAfterViewInit() {
    combineLatest([this._sidebarService.show$, this._sidebarService.templateList$])
      .pipe(
        distinctUntilChanged(),
        tap(([enabled, templates]) => {
          if (enabled) {
            this._renderTemplates(templates);
          } else {
            this._clearContent();
          }
        })
      )
      .subscribe();
  }

  private _clearContent() {
    this._viewRefs = [];
    this.container.clear();
  }

  toggle() {
    this.render = !this.render;

    if (this.render) {
      this._sidebarService.hide();
    } else {
      this._sidebarService.show();
    }
  }
}