import { Component, OnDestroy, EventEmitter } from '@angular/core';
import {
  NbMediaBreakpoint,
  NbMediaBreakpointsService,
  NbMenuItem,
  NbMenuService,
  NbSidebarService,
  NbThemeService,
} from '@nebular/theme';

import { StateService } from '../../../@core/data/state.service';

import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/takeUntil';

// TODO: move layouts into the framework
@Component({
  selector: 'ngx-xds-layout',
  styleUrls: ['./xds.layout.scss'],
  templateUrl: './xds.layout.html',
})

export class XdsLayoutComponent implements OnDestroy {

  subMenu: NbMenuItem[] = [];
  layout: any = {};
  sidebar: any = {};
  sidebarPinned = false;
  sidebarCompact = true;

  protected layoutState$: Subscription;
  protected sidebarState$: Subscription;
  protected menuClick$: Subscription;

  private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
  private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();

  constructor(protected stateService: StateService,
    protected menuService: NbMenuService,
    protected themeService: NbThemeService,
    protected bpService: NbMediaBreakpointsService,
    protected sidebarService: NbSidebarService) {

    this.layoutState$ = this.stateService.onLayoutState()
      .subscribe((layout: string) => this.layout = layout);

    this.sidebarState$ = this.stateService.onSidebarState()
      .subscribe((sidebar: string) => {
        this.sidebar = sidebar;
      });

    const isBp = this.bpService.getByName('is');

    this.menuClick$ = this.menuService.onItemSelect()
      .withLatestFrom(this.themeService.onMediaQueryChange())
      .delay(20)
      .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
        /*
        this.sidebarCompact = false;
        */
        // automatically collapse sidebar for narrow screen / mobile
        if (bpTo.width <= isBp.width) {
          this.sidebarService.collapse('menu-sidebar');
        }
      });

    // Set sidebarCompact according to sidebar state changes
    this.sidebarService.onToggle().subscribe(s => {
      if (s.tag === 'menu-sidebar') {
        this.sidebarPinned = false;
        this.sidebarCompact = !this.sidebarCompact;
      }
    });

    this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
    this.sidebarService.onExpand().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = false));
    this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));

    // FIXME: bug flicking menu - disable it for now
    /*
    // Automatically expand sidebar on mouse over
    this._mouseEnterStream.flatMap(e => {
      return Observable
        .of(e)
        .delay(100)
        .takeUntil(this._mouseLeaveStream);
      }).subscribe(e => {
        if (this.sidebarPinned || !this.sidebarCompact) {
          return;
        }
        // this._mouseLeaveStream.emit(null);
        this.sidebarService.toggle(false, 'menu-sidebar');
      });

    // Automatically collapse sidebar on mouse leave
    this._mouseLeaveStream.flatMap(e => {
      return Observable
        .of(e)
        .delay(100)
        .takeUntil(this._mouseEnterStream);
      }).subscribe(e => {
        if (this.sidebarPinned || this.sidebarCompact) {
          return;
        }
        // this._mouseEnterStream.emit(null);
        this.sidebarService.toggle(true, 'menu-sidebar');
      });
      */
  }

  ngOnDestroy() {
    this.layoutState$.unsubscribe();
    this.sidebarState$.unsubscribe();
    this.menuClick$.unsubscribe();
  }

  onMouseEnter($event) {
    // FIXME: bug flicking menu - disable it for now
    // this._mouseEnterStream.emit($event);
  }

  onMouseLeave($event) {
    // FIXME: bug flicking menu - disable it for now
    // this._mouseLeaveStream.emit($event);
  }

  pinSidebar() {
    this.sidebarPinned = !this.sidebarPinned;
  }

  closeSidebar() {
    this.sidebarService.toggle(true, 'menu-sidebar');
  }
}