import * as tslib_1 from "tslib";
import * as React from 'react';
import { observe } from 'xmobx/mobx';
import { observer } from 'xmobx/mobx-react';
import { CategoryListContext } from '@skava/packages/core/categories';
import { MobileNav, MobileMenuPageWrap } from './styled';
import { container } from './container';
import { MobileMenuPage } from './MobileMenuPage';
let MobileMenu = class MobileMenu extends React.Component {
    componentDidMount() {
        console.debug('[menu] mounted: ' + this.context.length);
        let prevLength = 0;
        this.disposer = observe(this.context, () => {
            if (!this.context) {
                console.warn('[menu] issue with context');
                return;
            }
            else if (prevLength === this.context.length) {
                console.debug('[menu] optimized, no menu category length change');
                return;
            }
            else {
                prevLength = this.context.length;
                container.setupFrontPage(this.context);
            }
        });
    }
    componentWillUnmount() {
        this.disposer();
    }
    render() {
        const { onLinkClicked } = this.props;
        const { currentPage, pageStack } = container;
        const pageStackView = pageStack.map((item, index) => (React.createElement(MobileMenuPage, { key: item.name, index: index, onLinkClicked: onLinkClicked, item: item })));
        return (React.createElement(MobileNav, null,
            React.createElement(MobileMenuPageWrap, { currentPage: currentPage }, pageStackView)));
    }
};
MobileMenu.contextType = CategoryListContext;
MobileMenu = tslib_1.__decorate([
    observer
], MobileMenu);
export default MobileMenu;
//# sourceMappingURL=MobileMenu.js.map