import { Directive, HostBinding, Input, HostListener, Output, EventEmitter, ContentChildren, QueryList, OnInit } from '@angular/core';
import { FarrisMenuItemDirective } from './menu-item.directive';
import { FarrisSubMenuComponent } from '../sub-menu/sub-menu.component';
import { FarrisMenuService } from '../service/menu.service';
@Directive(
    {
        selector: '[farrisMenu]'
    }
)

export class FarrisMenuDirective implements OnInit {


    /* 菜单项目 */
    @ContentChildren(FarrisMenuItemDirective) listOfMenuItemDirective: QueryList<FarrisMenuItemDirective>;

    /* 副菜单 */
    @ContentChildren(FarrisSubMenuComponent) listOfSubmenuComponent: QueryList<FarrisSubMenuComponent>;
    /* vertical horizontal inline */
    @Input() mode = 'vertical';

    /* light dark */
    @Input() theme = 'light';

    /* 触发事件 */
    @Output() fClick = new EventEmitter<any>();
    /* 一直存在的类名 */
    @HostBinding('class.f-component-dpmenu') dpmenu = true;
    @HostBinding('class.f-component-dpmenu-root') dpmenuRoot = true;


    /* 动态获取菜单样式 */
    @HostBinding('class.f-component-dpmenu-light')
    get isLight() {
        return this.theme === 'light';
    }

    @HostBinding('class.f-component-dpmenu-dark')
    get isDark() {
        return this.theme === 'dark';
    }

    /* 根据属性动态获取排列样式 水平  垂直  内嵌 */
    @HostBinding('class.f-component-dpmenu-horizontal')
    get isHorizontal() {
        return this.mode === 'horizontal';
    }


    @HostBinding('class.f-component-dpmenu-vertical')
    get isVertical() {
        return this.mode === 'vertical';
    }

    @HostBinding('class.f-component-dpmenu-inline')
    get isInline() {
        return this.mode === 'inline';
    }

    constructor(
        private menuService: FarrisMenuService
    ) { }


    ngOnInit() {
        this.menuService.menuClick$.subscribe(menu => {
            this.fClick.emit(menu);
        });
    }


    /* 更新层级 */
    updateMenuLevel() {
        // if(){
        // }
    }
}