define([
    'preact',
    'htm',
    '../SidebarMenu/SidebarMenu',
    'css!./Sidebar.css'
], (
    preact,
    htm,
    SidebarMenu
) => {

    const {h, Component} = preact;
    const html = htm.bind(h);

    function intersect(a1, a2) {
        return a1.some(function (a) {
            return a2.indexOf(a) >= 0;
        });
    }

    function routeToPath(route) {
        const path = [];
        if (route.route.path) {
            for (let i = 0; i < route.route.path.length; i += 1) {
                const pathElement = route.route.path[i];
                if (pathElement.type !== 'literal') {
                    break;
                }
                path.push(pathElement.value);
            }
        }
        return path.join('/');
    }

    class Sidebar extends Component {
        constructor(props) {
            super(props);

            this.menuService = this.props.runtime.service('menu');

            this.state = {
                menu: this.computeMenu()
            };

            this.menuService.onChange(() => {
                this.setState({
                    menu: this.computeMenu()
                });
            });
        }

        componentDidMount() {
            this.props.runtime.receive('session', 'change', () => {
                this.setState({
                    menu: this.computeMenu()
                });
            });

            this.props.runtime.receive('route', 'routing', (route) => {
                const path = routeToPath(route);
                this.setState({
                    menu: this.computeMenu(path)
                });
            });
        }

        // computeMenu() {
        //     const sidebarMenu = this.menuService.getSidebarMenu();
        //     const allowedTags = this.props.runtime.config('ui.allow', []);
        //     const isLoggedIn = this.props.runtime.service('session').isLoggedIn();
        //     const userRoles = this.props.runtime.service('session').getRoles().map((role) => {
        //         return role.id;
        //     });

        //     const filterMenu = (menu) => {
        //         return menu.filter((item) => {
        //             if (!isLoggedIn && item.authRequired) {
        //                 return false;
        //             }
        //             if (item.allow) {
        //                 return intersect(item.allow, allowedTags);
        //             }
        //             if (item.allowRoles) {
        //                 return intersect(item.allowRoles, userRoles);
        //             }
        //             return true;
        //         });
        //     };



        //     return {
        //         main: filterMenu(sidebarMenu.main)
        //     };
        // }

        computeMenu(selectedItemPath) {
            const allowedTags = this.props.runtime.config('ui.allow', []);
            const isLoggedIn = this.props.runtime.service('session').isLoggedIn();
            const userRoles = this.props.runtime.service('session').getRoles().map((role) => {
                return role.id;
            });

            const sidebarMenu = this.menuService.getSidebarMenu();
            // const sidebarMenu =  this.props.runtime.service('menu').getCurrentMenu('sidebar');

            const filterMenu = (menu) => {
                return menu.filter((item) => {
                    if (!isLoggedIn && item.auth) {
                        return false;
                    }
                    if (item.allow) {
                        return intersect(item.allow, allowedTags);
                    }
                    if (item.allowRoles) {
                        return intersect(item.allowRoles, userRoles);
                    }
                    return true;
                });
            };

            return filterMenu(sidebarMenu.main)
                .map((menuItem) => {
                    const isActive = (selectedItemPath && selectedItemPath === menuItem.path) ? true : false;
                    return {
                        id: menuItem.id,
                        label: menuItem.label,
                        icon: menuItem.icon,
                        path: menuItem.path,
                        authRequired: menuItem.authRequired ? true : false,
                        isActive,
                        allow: menuItem.allow,
                        beta: menuItem.beta
                    };
                });
        }

        render() {
            if (!this.state.menu) {
                return;
            }
            const props = {
                menu: this.state.menu,
                runtime: this.props.runtime
            };
            return html`
                <div className="Sidebar"
                     data-k-b-testhook-component="sidebar">
                     <${SidebarMenu} ...${props} />
                </div>
            `;
        }
    }

    return Sidebar;
});
@@ -937,24 +937,52 @@
 s.state = %7B%0A
+                path: null,%0A
             
@@ -1002,32 +1002,32 @@
 s.computeMenu()%0A
-
             %7D;%0A%0A
@@ -1139,32 +1139,47 @@
 his.computeMenu(
+this.state.path
 )%0A              
@@ -1376,32 +1376,47 @@
 his.computeMenu(
+this.state.path
 )%0A              
@@ -1583,32 +1583,58 @@
 this.setState(%7B%0A
+                    path,%0A
                 
@@ -1717,1117 +1717,8 @@
  %7D%0A%0A
-        // computeMenu() %7B%0A        //     const sidebarMenu = this.menuService.getSidebarMenu();%0A        //     const allowedTags = this.props.runtime.config('ui.allow', %5B%5D);%0A        //     const isLoggedIn = this.props.runtime.service('session').isLoggedIn();%0A        //     const userRoles = this.props.runtime.service('session').getRoles().map((role) =%3E %7B%0A        //         return role.id;%0A        //     %7D);%0A%0A        //     const filterMenu = (menu) =%3E %7B%0A        //         return menu.filter((item) =%3E %7B%0A        //             if (!isLoggedIn && item.authRequired) %7B%0A        //                 return false;%0A        //             %7D%0A        //             if (item.allow) %7B%0A        //                 return intersect(item.allow, allowedTags);%0A        //             %7D%0A        //             if (item.allowRoles) %7B%0A        //                 return intersect(item.allowRoles, userRoles);%0A        //             %7D%0A        //             return true;%0A        //         %7D);%0A        //     %7D;%0A%0A%0A%0A        //     return %7B%0A        //         main: filterMenu(sidebarMenu.main)%0A        //     %7D;%0A        // %7D%0A%0A
     
@@ -2047,32 +2047,32 @@
            %7D);%0A%0A
+
             cons
@@ -2125,106 +2125,8 @@
 u();
-%0A            // const sidebarMenu =  this.props.runtime.service('menu').getCurrentMenu('sidebar');
 %0A%0A  

fix sidebar menu highlighting when invoking with path on first load