import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Input,
  ViewEncapsulation
} from '@angular/core';
import { BixiLayoutService } from './layout.service';
import { IBreadcrumb, IMenu } from './layout.type';

@Component({
  selector: 'bixi-layout',
  templateUrl: './layout.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  exportAs: 'bixiLayout',
  host: {
    class: 'bixi-layout'
  }
})
export class BixiLayoutComponent {
  @Input() menus: IMenu[] = [];
  @Input() logoSmall: string;
  @Input() logoLarge: string;
  @Input() singleOpen = false;
  open: boolean = true;
  showHeader: boolean = true;
  breadcrumbs: IBreadcrumb[];
  constructor(
    private layoutService: BixiLayoutService,
    private cdr: ChangeDetectorRef
  ) {
    this.layoutService.openChange.subscribe((open: boolean) => {
      this.open = open;
    });
    this.layoutService.breadcrumb$.subscribe((bread: IBreadcrumb[]) => {
      this.breadcrumbs = bread;
    });
    this.layoutService.headerVisible$.subscribe((open: boolean) => {
      this.showHeader = open;
      this.cdr.markForCheck();
    });
  }

  onOpenChange() {
    this.layoutService.toggleMenu();
  }
}