// angular import
import {Component, inject, OnInit, output} from '@angular/core';

// project import

import { NavLeftComponent } from './nav-left/nav-left.component';
import { NavRightComponent } from './nav-right/nav-right.component';
import {DOCUMENT} from '@angular/common';

@Component({
  selector: 'app-nav-bar',
  imports: [NavLeftComponent, NavRightComponent],
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit{
  private document = inject<Document>(DOCUMENT);
  // public props
  NavCollapse = output();
  NavCollapsedMob = output();

  navCollapsed: boolean = false;
  windowWidth: number | undefined = 1000;
  navCollapsedMob: boolean;

  // Constructor
  constructor() {

    this.navCollapsedMob = false;
  }

  ngOnInit(): void {
    this.windowWidth = this.document.defaultView?.innerWidth;
    }

  // public method
  navCollapse() {
    if (!!this.windowWidth && this.windowWidth >= 1025) {
      this.navCollapsed = !this.navCollapsed;
      this.NavCollapse.emit();
    }
  }

  navCollapseMob() {
    if (!!this.windowWidth && this.windowWidth < 1025) {
      this.NavCollapsedMob.emit();
    }
  }
}