import * as tslib_1 from "tslib";
// lib
import React from 'react';
import { computed } from 'xmobx/mobx';
import { observer } from 'xmobx/mobx-react';
// types
import { isArray, isReal } from 'exotic';
import { CategoryListContext } from '@skava/packages/core/categories';
import { state } from '@skava/packages/features/Header/state';
import { renderNestedNavItem, renderDropDownPane, renderTopLevelTitle, renderMenuDropDown, 
//
InnerNav, MenuWhiteSide, NavigationWrapper, NavigationInnerWrapper, Navigation, NavList, } from './_themed';
// recursively render all items into an array
const renderNestedNavList = (items, nestedItems = []) => {
    if (isArray(items)) {
        // tslint:disable:no-for-each-push
        items.filter(isReal).forEach(item => {
            // @note - was `isHeader`
            // @todo split this back into a named piece
            nestedItems.push(renderNestedNavItem(item, nestedItems.length === 0));
            renderNestedNavList(item.categories, nestedItems);
        });
    }
    return nestedItems;
};
const renderInnerNav = (child) => {
    const innerView = renderNestedNavList([child]);
    return React.createElement(InnerNav, { key: child.identifier }, innerView);
};
const handleToggleClick = (item) => {
    console.log('[menu] unused');
    // const isNotTarget = (category: MenuItemType) => category.name !== item.name
    // this.categories.filter(isNotTarget).forEach(hide)
};
/**
 * @todo only render when isVisible, make as component...
 */
const renderNavItem = (item, index) => {
    const titleView = renderTopLevelTitle(item);
    const boxView = item.isVisible && renderDropDownPane(item, renderInnerNav);
    const menuArgs = {
        item,
        titleView,
        boxView,
        onClick: handleToggleClick,
    };
    return renderMenuDropDown(menuArgs);
};
/**
 * @todo split out the inner list wrapping...
 * @todo simplify dom? render top level on left
 *       then find active...
 */
let MenuWidget = class MenuWidget extends React.Component {
    get categories() {
        return this.context || [];
    }
    // =========
    render() {
        const listView = this.categories.map(renderNavItem);
        return (React.createElement(NavigationWrapper, { isVisible: state.isMenuDropDownVisible, onMouseLeave: process.env.NODE_ENV === 'production' ? state.hide : undefined },
            React.createElement(NavigationInnerWrapper, null,
                React.createElement(Navigation, null,
                    React.createElement(NavList, null, listView))),
            React.createElement(MenuWhiteSide, null)));
    }
};
MenuWidget.displayName = 'Menu';
MenuWidget.contextType = CategoryListContext;
tslib_1.__decorate([
    computed
], MenuWidget.prototype, "categories", null);
MenuWidget = tslib_1.__decorate([
    observer
], MenuWidget);
export default MenuWidget;
//# sourceMappingURL=Menu.js.map