var _subscription, _resetSelected;
import { __classPrivateFieldGet } from "tslib";
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
/**
 * Methods:
 * ```ts
 * highlighMenuSelected = (): void
 * ```
 */
export class ZuiTemplateLayoutIconsComponent {
    constructor(router) {
        this.router = router;
        this.switchMenu = new EventEmitter();
        this.openDetail = new EventEmitter();
        _subscription.set(this, new Subscription());
        this.selectedIndex = -1;
        _resetSelected.set(this, () => {
            this.selectedIndex = -1;
        });
        this.open = (index) => {
            let complete = false;
            const menus = this.menus.filter((menu, i) => {
                if (i > index && !complete) {
                    if (menu.type !== 'group') {
                        return true;
                    }
                    else {
                        complete = true;
                    }
                }
                return false;
            });
            if (menus.length > 0) {
                this.selectedIndex = index;
                this.openDetail.emit(menus);
            }
            else {
                const { routerLink } = this.menus[index];
                if (routerLink)
                    this.router.navigateByUrl(routerLink);
            }
        };
        this.onSwitch = () => {
            this.sidenavDetail.close();
            this.switchMenu.emit();
        };
        this.resetSelected = () => {
            this.menus.forEach(menu => {
                var _a;
                const currentChild = menu;
                currentChild.selected = false;
                (_a = menu.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
                    var _a;
                    const currentChild = child;
                    currentChild.selected = false;
                    (_a = child.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
                        const currentChild = child;
                        currentChild.selected = false;
                    });
                });
            });
            this.sidenavDetail.close();
        };
        //public
        this.highlighMenuSelected = () => {
            let groupIndex = 0;
            const isSelectedDetail = this.menus.some((item1, index) => {
                var _a;
                const menu = item1;
                if (menu.type === 'group') {
                    groupIndex = index;
                    return false;
                }
                const isSelectedDetail = (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.some(item2 => {
                    var _a;
                    const menu = item2;
                    const isSelectedDetail = (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.some(item3 => {
                        const menu = item3;
                        return menu.selected;
                    });
                    return menu.selected || isSelectedDetail;
                });
                const isSelected = menu.selected || isSelectedDetail;
                if (isSelected)
                    this.selectedIndex = groupIndex;
                return isSelected;
            });
            if (!isSelectedDetail)
                __classPrivateFieldGet(this, _resetSelected).call(this);
        };
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subscription).add(this.sidenavDetail.closedStart.subscribe(() => {
            this.highlighMenuSelected();
        }));
    }
    ngOnChanges() {
        __classPrivateFieldGet(this, _resetSelected).call(this);
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
    get menu() {
        return this.option.menu;
    }
    get menus() {
        return this.menu.items;
    }
    get topHeader() {
        return this.menu.topHeader;
    }
}
_subscription = new WeakMap(), _resetSelected = new WeakMap();
ZuiTemplateLayoutIconsComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-template-layout-icons',
                template: "<div class=\"zui-template-layout-icons\" [ngStyle]=\"{backgroundColor: menu.bgColor}\">\n  <div *ngIf=\"topHeader?.logo as logo\" class=\"zui-template-layout-icons__logo\">\n    <img [src]=\"logo.src\" [routerLink]=\"logo.routerLink\" alt=\"logo\" [ngStyle]=\"{width: logo.width || '100px', height: logo.height || '40px'}\" (click)=\"resetSelected()\" />\n  </div>\n  <div\n    *ngIf=\"topHeader?.title as title\"\n    class=\"zui-template-layout-icons__title\"\n    [innerHtml]=\"title.value\"\n    [routerLink]=\"title.routerLink\"\n    [ngStyle]=\"{color: title.color}\"\n    (click)=\"resetSelected()\"\n  ></div>\n  <div class=\"zui-template-layout-icons__menus\">\n    <ng-container *ngFor=\"let menu of menus; let index = index\">\n      <div *ngIf=\"menu?.type === 'group'\" class=\"zui-template-layout-icons__item\" [class.zui-template-layout-icons__item-selected]=\"selectedIndex === index\" (click)=\"open(index)\">\n        <mat-icon>{{ menu.icon }}</mat-icon>\n        <div *ngIf=\"menu.title\">{{ menu.title }}</div>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"menu.allowSwitchView\" class=\"zui-template-layout-icons__footer\">\n    <mat-icon (click)=\"onSwitch()\">menu</mat-icon>\n  </div>\n</div>\n",
                styles: [".zui-template-layout-icons{color:#fff;display:flex;flex-direction:column;height:100vh;text-align:center}.zui-template-layout-icons__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-top:5px;padding:10px;border-radius:5px;min-height:60px;color:var(--descriptionColor_142c1b45);cursor:pointer}.zui-template-layout-icons__item-selected,.zui-template-layout-icons__item:hover{background-color:var(--hoverBgColor_142c1b45);color:var(--hoverFontColor_142c1b45)}.zui-template-layout-icons__item>mat-icon{color:var(--titleColor_142c1b45)}.zui-template-layout-icons__item>div{font-size:14px;word-break:break-word}.zui-template-layout-icons__logo,.zui-template-layout-icons__title{cursor:pointer;margin:20px 0 15px}.zui-template-layout-icons__menus{margin-bottom:10px;padding:0 10px;flex:1;overflow-y:auto}.zui-template-layout-icons__menus::-webkit-scrollbar{width:5px}.zui-template-layout-icons__menus::-webkit-scrollbar-thumb{background:var(--scrollBarColor_142c1b45);border-radius:5px}.zui-template-layout-icons__footer>mat-icon{cursor:pointer;border-radius:50%;padding:5px;width:34px;height:34px}.zui-template-layout-icons__footer>mat-icon:hover{background-color:var(--hoverBgColor_142c1b45);color:var(--hoverFontColor_142c1b45)}"]
            },] }
];
ZuiTemplateLayoutIconsComponent.ctorParameters = () => [
    { type: Router }
];
ZuiTemplateLayoutIconsComponent.propDecorators = {
    option: [{ type: Input }],
    sidenavDetail: [{ type: Input }],
    switchMenu: [{ type: Output }],
    openDetail: [{ type: Output }]
};
//# sourceMappingURL=index.component.js.map