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

@Component({
  selector: 'bixi-layout-header',
  templateUrl: './header.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  exportAs: 'bixiLayoutHeader',
  host: {
    class: 'bixi-layout-header',
    '[class.bixi-layout-header-collapsed]': '!open',
    '[class.bixi-layout-header-opened]': 'open'
  }
})
export class BixiHeaderComponent {
  @Input() logoSmall: string;
  @Input() logoLarge: string;
  @Input() breadcrumbs: string | TemplateRef<void>;
  @Input() tools: string | TemplateRef<void>;

  open: boolean = true;
  breads: IBreadcrumb[];
  logo: string = '';
  constructor(
    @Optional() public cdr: ChangeDetectorRef,
    private layoutService: BixiLayoutService
  ) {
    this.layoutService.openChange.subscribe((open: boolean) => {
      this.open = open;
      if (this.cdr) {
        this.cdr.markForCheck();
      }
    });
    this.layoutService.breadcrumb$.subscribe((breads: IBreadcrumb[]) => {
      this.breads = breads;
      if (this.cdr) {
        this.cdr.markForCheck();
      }
    });
  }

  get logoClass() {
    return this.open ? 'bixi-layout-header-logo-full' : 'bixi-layout-header-logo-small';
  }

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