import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
import { Observable, Subscription } from "rxjs";
import { BreakpointObserver, BreakpointState } from "@angular/cdk/layout";
import { LoadingService } from "src/app/cores/services/loading.service";

@Component({
  selector: "app-dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.scss"],
  host: { class: "flex-fill bg-secondary bg-opacity-10" },
})
export class DashboardComponent implements OnInit, OnDestroy {
  isSidenavCollapsed = false;
  isMobile = false;
  breakpointSubscription!: Subscription;
  isLoading$ = new Observable<boolean>();

  constructor(
    private breakpointObserver: BreakpointObserver,
    private loading: LoadingService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.breakpointSubscription = this.breakpointObserver
      .observe("(max-width: 1199.98px)")
      .subscribe((state: BreakpointState) => {
        this.isMobile = state.matches;
      });
    this.isLoading$ = this.loading.isLoading();
  }

  ngAfterViewChecked() {
    this.cdr.detectChanges();
  }

  ngOnDestroy(): void {
    this.breakpointSubscription.unsubscribe();
  }

  onToggleSidebar(e: any) {
    this.isSidenavCollapsed = e;
  }
}
