import { Component, OnInit, Input, ViewChild, TemplateRef, Output, EventEmitter } from '@angular/core';
import { NaSidebar } from './na-sidebar';
import { NzSiderComponent } from 'ng-zorro-antd';

@Component({
  selector: 'na-layout-sidebar',
  templateUrl: './na-sidebar.component.html',
  styleUrls: ['./na-sidebar.component.scss'],
  // tslint:disable-next-line:use-host-property-decorator
  host               : {
    '[class.ant-layout-sider]'           : 'true',
    '[class.ant-layout-sider-zero-width]': 'naCollapsed && (naCollapsedWidth===0)',
    '[style.flex]'                       : 'flexSetting',
    '[style.max-width.px]'               : 'widthSetting',
    '[style.min-width.px]'               : 'widthSetting',
    '[style.width.px]'                   : 'widthSetting'
  }
})
export class NaSidebarComponent implements OnInit {
  // @ViewChild(NzSiderComponent) nzSider: NzSiderComponent;

  @Input() naCollapsed = false;
  @Input() menus: NaSidebar.Menu[] = [];
  @Input() naWidth = 260;
  @Input() naCollapsedWidth = 80;
  @Input() naTrigger: TemplateRef<void> = null;
  mouseEnterDelay = 1;

  @Output() click = new EventEmitter<NaSidebar.Menu>();

  constructor() { }

  ngOnInit() {
  }

  get flexSetting(): string {
    if (this.naCollapsed) {
      return `0 0 ${this.naCollapsedWidth}px`;
    } else {
      return `0 0 ${this.naWidth}px`;
    }
  }

  get widthSetting(): number {
    if (this.naCollapsed) {
      return this.naCollapsedWidth;
    } else {
      return this.naWidth;
    }
  }

  onClickMenu(menu: NaSidebar.Menu) {
    // console.log(menu);
    this.click.emit(menu);
  }

}