import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BehaviorSubject, Subject } from 'rxjs';
import { WindowService } from '@ironsource/fusion-ui/services/window';
import { NavigationMenuComponent } from '@ironsource/fusion-ui/components/navigation-menu/v4';
import { LayoutHeaderComponent } from './components/layout-header/layout-header.component';
import { NavigationEnd, Router } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@ironsource/fusion-ui/services/window";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
const _c0 = ["navigationMenu"];
const _c1 = ["*"];
export class LayoutComponent {
    set configuration(value) {
        if (Array.isArray(value?.navigationMenuItems) && value.navigationMenuItems.length > 0) {
            this.navigationMenu$.next(value.navigationMenuItems);
            if (this.setSelectedMenuByPath(this.navigationMenu$.getValue())) {
                this.toggleMenu();
            }
        }
        this.primaryMenuItemMode = value?.primaryMenuItemMode ?? 'clickToOpenSecondaryMenu';
        this.layoutUser = { ...value?.layoutUser } ?? null;
    }
    set headerContent(value) {
        this._headerContent = value;
    }
    get headerContent() {
        return this._headerContent;
    }
    set teleportElements(value) {
        this._teleportElements = value;
    }
    get teleportElements() {
        return this._teleportElements ?? [];
    }
    constructor(windowRef, router) {
        this.windowRef = windowRef;
        this.router = router;
        this.pageBackButtonClicked = new EventEmitter();
        this.menuItemClick = new EventEmitter();
        /** @internal
         * Used in additional from selected menu item by route
         * */
        this.menuItemSelectedByRoute = new EventEmitter();
        /** @internal */
        this.navigationMenu$ = new BehaviorSubject([]);
        this.onDestroy$ = new Subject();
        this.isMenuToggled = false;
    }
    ngOnInit() {
        this.initNavigationEvents();
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    initNavigationEvents() {
        this.router.events
            .pipe(takeUntil(this.onDestroy$), filter(event => event instanceof NavigationEnd))
            .subscribe((event) => {
            if (this.setSelectedMenuByPath(this.navigationMenu$.getValue())) {
                this.toggleMenu();
            }
        });
    }
    isActiveMenuItem(menuItem, currentPath) {
        return (menuItem.route &&
            menuItem.route !== '/' &&
            (currentPath.startsWith(menuItem.route) || this.checkBySubRoutes(menuItem, currentPath)));
    }
    checkBySubRoutes(item, route) {
        if (Array.isArray(item.subRoutes)) {
            return item.subRoutes.some(subRoute => route.startsWith(subRoute));
        }
        return false;
    }
    toggleMenu() {
        if (!this.isMenuToggled) {
            this.navigationMenu.toggleMenu();
            this.isMenuToggled = true;
        }
    }
    setSelectedMenuByPath(menuPrimary) {
        const currentPath = this.windowRef.nativeWindow.location.pathname;
        let itemFound = null;
        let primaryItemFound = null;
        if (menuPrimary.length) {
            menuPrimary.forEach((primaryMenuItem) => {
                if (!itemFound && primaryMenuItem.route && primaryMenuItem.route !== '/' && currentPath.startsWith(primaryMenuItem.route)) {
                    itemFound = primaryMenuItem;
                    primaryItemFound = primaryMenuItem;
                }
                else {
                    if (primaryMenuItem?.menuItems?.length && !itemFound) {
                        primaryMenuItem.menuItems.forEach((menuItem) => {
                            if (!itemFound) {
                                if (menuItem.children?.length) {
                                    menuItem.children.forEach((childMenuItem) => {
                                        if (!itemFound && this.isActiveMenuItem(childMenuItem, currentPath)) {
                                            itemFound = childMenuItem;
                                            primaryItemFound = primaryMenuItem;
                                        }
                                    });
                                }
                                else if (menuItem.route && this.isActiveMenuItem(menuItem, currentPath)) {
                                    itemFound = menuItem;
                                    primaryItemFound = primaryMenuItem;
                                }
                            }
                        });
                    }
                }
            });
        }
        if (itemFound) {
            this.navigationMenu.setActiveMenu(primaryItemFound, itemFound);
            this.menuItemSelectedByRoute.emit(itemFound);
        }
        else {
            this.navigationMenu.setActiveMenu(null, null);
        }
        return !!itemFound;
    }
    static { this.ɵfac = function LayoutComponent_Factory(t) { return new (t || LayoutComponent)(i0.ɵɵdirectiveInject(i1.WindowService), i0.ɵɵdirectiveInject(i2.Router)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutComponent, selectors: [["fusion-layout"]], viewQuery: function LayoutComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.navigationMenu = _t.first);
        } }, inputs: { configuration: "configuration", headerContent: "headerContent", teleportElements: "teleportElements" }, outputs: { pageBackButtonClicked: "pageBackButtonClicked", menuItemClick: "menuItemClick", menuItemSelectedByRoute: "menuItemSelectedByRoute" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1, decls: 15, vars: 17, consts: [[1, "fu-layout"], [1, "fu-left-navigation"], [3, "primaryMenuItemMode", "layoutUser", "menuItems", "menuItemClicked"], ["navigationMenu", ""], [1, "fu-main-page"], [1, "fu-page-header"], [3, "headerContent", "teleportElements", "backButtonClicked"], ["id", "main-view", 1, "main-content"], ["mainContent", ""], [1, "page-view"], [1, "app-route-content-holder"]], template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "fusion-navigation-menu", 2, 3);
            i0.ɵɵlistener("menuItemClicked", function LayoutComponent_Template_fusion_navigation_menu_menuItemClicked_2_listener($event) { return ctx.menuItemClick.emit($event); });
            i0.ɵɵpipe(4, "async");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(5, "div", 4)(6, "div", 5)(7, "fusion-layout-header", 6);
            i0.ɵɵlistener("backButtonClicked", function LayoutComponent_Template_fusion_layout_header_backButtonClicked_7_listener($event) { return ctx.pageBackButtonClicked.emit($event); });
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(8, "div", 7, 8);
            i0.ɵɵpipe(10, "async");
            i0.ɵɵpipe(11, "async");
            i0.ɵɵelementStart(12, "div", 9)(13, "div", 10);
            i0.ɵɵprojection(14);
            i0.ɵɵelementEnd()()()()();
        } if (rf & 2) {
            const _r0 = i0.ɵɵreference(3);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("primaryMenuItemMode", ctx.primaryMenuItemMode)("layoutUser", ctx.layoutUser)("menuItems", i0.ɵɵpipeBind1(4, 11, ctx.navigationMenu$));
            i0.ɵɵadvance(4);
            i0.ɵɵclassProp("fu-page-header-multiline", ctx.headerContent == null ? null : ctx.headerContent.multiline);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fu-multiline-header", ctx.headerContent == null ? null : ctx.headerContent.multiline);
            i0.ɵɵproperty("headerContent", ctx.headerContent)("teleportElements", ctx.teleportElements);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fu-menu-expanded-opened", !_r0.isSecondaryMenuExpandable && i0.ɵɵpipeBind1(10, 13, _r0.secondaryMenuOpen$) && i0.ɵɵpipeBind1(11, 15, _r0.secondaryMenuItems$).length);
        } }, dependencies: [CommonModule, i3.AsyncPipe, LayoutHeaderComponent, NavigationMenuComponent], styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%], .font-v4-chart-2[_ngcontent-%COMP%], .font-v4-chart-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold[_ngcontent-%COMP%], .font-v4-chip-label[_ngcontent-%COMP%], .font-v4-table-label[_ngcontent-%COMP%], .font-v4-button[_ngcontent-%COMP%], .font-v4-heading-6[_ngcontent-%COMP%], .font-v4-heading-5[_ngcontent-%COMP%], .font-v4-heading-4[_ngcontent-%COMP%], .font-v4-heading-3[_ngcontent-%COMP%], .font-v4-heading-2[_ngcontent-%COMP%], .font-v4-heading-1[_ngcontent-%COMP%], .font-v4-title[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium[_ngcontent-%COMP%], .font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-input-label[_ngcontent-%COMP%], .font-v4-overline[_ngcontent-%COMP%], .font-v4-subtitle-2[_ngcontent-%COMP%], .font-v4-subtitle-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}[_nghost-%COMP%], .font-v4-regular[_ngcontent-%COMP%], .font-v4-caption[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title[_ngcontent-%COMP%]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2[_ngcontent-%COMP%]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3[_ngcontent-%COMP%]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5[_ngcontent-%COMP%]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6[_ngcontent-%COMP%]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-v4-body-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2[_ngcontent-%COMP%]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.font-v4-table-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem}.font-v4-chip-label[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]{display:grid;grid-template-columns:min-content 1fr;width:100vw;height:100vh}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-left-navigation[_ngcontent-%COMP%]{display:block;height:100%;max-width:256px}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]{height:100vh;display:flex;flex-direction:column}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .fu-page-header[_ngcontent-%COMP%]{flex-grow:0;border-bottom:solid 1px var(--common-divider, hsl(0, 0%, 86.8%))}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .fu-page-header.fu-page-header-multiline[_ngcontent-%COMP%]{border-bottom:none}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%]{flex-grow:1;overflow:auto;width:calc(100vw - 56px);transition:width .45s ease-out}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .main-content.fu-menu-expanded-opened[_ngcontent-%COMP%]{width:calc(100vw - 256px)}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%]   .page-view[_ngcontent-%COMP%]{height:100%;width:100%}[_nghost-%COMP%]   .fu-layout[_ngcontent-%COMP%]   .fu-main-page[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%]   .page-view[_ngcontent-%COMP%]   .app-route-content-holder[_ngcontent-%COMP%]{height:100%;width:100%}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
        type: Component,
        args: [{ selector: 'fusion-layout', standalone: true, imports: [CommonModule, LayoutHeaderComponent, NavigationMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fu-layout\">\n    <!--navigation-->\n    <div class=\"fu-left-navigation\">\n        <fusion-navigation-menu #navigationMenu\n            [primaryMenuItemMode]=\"primaryMenuItemMode\"\n            [layoutUser]=\"layoutUser\"\n            [menuItems]=\"navigationMenu$ | async\"\n            (menuItemClicked)=\"menuItemClick.emit($event)\"\n        ></fusion-navigation-menu>\n    </div>\n    <!--navigation-->\n    <div class=\"fu-main-page\">\n        <!--main header-->\n        <div class=\"fu-page-header\" [class.fu-page-header-multiline]=\"headerContent?.multiline\">\n            <fusion-layout-header\n                [class.fu-multiline-header]=\"headerContent?.multiline\"\n                [headerContent]=\"headerContent\"\n                [teleportElements]=\"teleportElements\"\n                (backButtonClicked)=\"pageBackButtonClicked.emit($event)\"\n            ></fusion-layout-header>\n        </div>\n        <!--main header-->\n        <!--main content-->\n        <div #mainContent class=\"main-content\" id=\"main-view\" [class.fu-menu-expanded-opened]=\"!navigationMenu.isSecondaryMenuExpandable && (navigationMenu.secondaryMenuOpen$ | async) && (navigationMenu.secondaryMenuItems$ | async).length\">\n            <div class=\"page-view\">\n                <div class=\"app-route-content-holder\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n        <!--main content-->\n    </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold,.font-v4-tab-label-2,.font-v4-chart-2,.font-v4-chart-1{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold,.font-v4-chip-label,.font-v4-table-label,.font-v4-button,.font-v4-heading-6,.font-v4-heading-5,.font-v4-heading-4,.font-v4-heading-3,.font-v4-heading-2,.font-v4-heading-1,.font-v4-title{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium,.font-v4-tab-label-1,.font-v4-input-label,.font-v4-overline,.font-v4-subtitle-2,.font-v4-subtitle-1{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}:host,.font-v4-regular,.font-v4-caption,.font-v4-body-2,.font-v4-body-1{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-v4-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption{font-size:.75rem;line-height:1rem}.font-v4-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1,.font-v4-tab-label-2{font-size:.875rem;line-height:1rem}.font-v4-chip-label{font-size:.75rem;line-height:1rem}:host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}:host .fu-layout{display:grid;grid-template-columns:min-content 1fr;width:100vw;height:100vh}:host .fu-layout .fu-left-navigation{display:block;height:100%;max-width:256px}:host .fu-layout .fu-main-page{height:100vh;display:flex;flex-direction:column}:host .fu-layout .fu-main-page .fu-page-header{flex-grow:0;border-bottom:solid 1px var(--common-divider, hsl(0, 0%, 86.8%))}:host .fu-layout .fu-main-page .fu-page-header.fu-page-header-multiline{border-bottom:none}:host .fu-layout .fu-main-page .main-content{flex-grow:1;overflow:auto;width:calc(100vw - 56px);transition:width .45s ease-out}:host .fu-layout .fu-main-page .main-content.fu-menu-expanded-opened{width:calc(100vw - 256px)}:host .fu-layout .fu-main-page .main-content .page-view{height:100%;width:100%}:host .fu-layout .fu-main-page .main-content .page-view .app-route-content-holder{height:100%;width:100%}\n"] }]
    }], () => [{ type: i1.WindowService }, { type: i2.Router }], { configuration: [{
            type: Input
        }], headerContent: [{
            type: Input
        }], teleportElements: [{
            type: Input
        }], pageBackButtonClicked: [{
            type: Output
        }], menuItemClick: [{
            type: Output
        }], menuItemSelectedByRoute: [{
            type: Output
        }], navigationMenu: [{
            type: ViewChild,
            args: ['navigationMenu', { static: true }]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutComponent, { className: "LayoutComponent", filePath: "layout.component.ts", lineNumber: 21 }); })();
//# sourceMappingURL=data:application/json;base64, 