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

@Component({
  selector: 'frame-sidebar',
  styleUrls: ['sidebar.component.scss'],
  template: `<ng-container #container></ng-container>`,
  standalone: false
})
export class SidebarComponent implements AfterViewInit {
  private _sidebarService = inject(TalyFrameSidebarService);

  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
  private _viewRefs: EmbeddedViewRef<unknown>[] = [];
  render = false;

  private destroyRef = inject(DestroyRef);

  _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(
        takeUntilDestroyed(this.destroyRef),
        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();
    }
  }
}