import {
  AfterViewInit,
  Component,
  DestroyRef,
  EmbeddedViewRef,
  HostBinding,
  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'],
  templateUrl: 'sidebar.component.html',
  standalone: false
})
export class SidebarComponent implements AfterViewInit {
  private _sidebarService = inject(TalyFrameSidebarService);

  @HostBinding('class.is-dark')
  isDark = false;

  @HostBinding('class.is-floating')
  isFloating = false;

  @HostBinding('class.has-margins')
  hasMargins = false;

  protected header = '';

  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
  render = false;

  private destroyRef = inject(DestroyRef);

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

    templates.forEach((template) => {
      this.container.createEmbeddedView(template);
      this.render = true;
    });
  }

  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();

    this._sidebarService.sidebarConfig$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((config) => {
        if (config.header) {
          this.header = config.header;
          this.hasMargins = true;
        }
        this.isDark = config.appearance === 'dark';
        this.isFloating = config.position === 'floating';
      });
  }

  private _clearContent() {
    this.container.clear();
  }

  toggle() {
    if (this.render) {
      this._sidebarService.hideContent();
    } else {
      this._sidebarService.moveContentToSidebar();
    }
  }
}