import { React, Link } from '../lib';
import { ViewController } from '../lib/ctr';
import { history } from '../lib/router';
export default class Menu extends ViewController {
    constructor(props) {
        super(props);
        this.state = { pathname: history.location.pathname };
    }
    reloadNifty() {
        require('cport-nifty/js/nifty.js');
        jQuery.niftyNav('bind');
    }
    setState(state) {
        super.setState(state);
        setTimeout(() => this.reloadNifty(), 200);
    }
    get pathname() {
        return this.state.pathname;
    }
    triggerLoad() {
        this.m_UnregisterCallback = history.listen(() => {
            this.setState({ pathname: history.location.pathname });
        });
    }
    triggerRemove() {
        this.m_UnregisterCallback();
    }
    _renderMenuList(list, level, out) {
        return list.map((e, j) => {
            var key = `key_${level}_${j}`;
            if (typeof e == 'string') {
                if (e == '-') {
                    return React.createElement("li", { className: "list-divider", key: key });
                }
                else {
                    return React.createElement("li", { className: "list-header", key: key }, e);
                }
            }
            else {
                var children = e.children || [];
                var In = { selected: false };
                var ch = this._renderMenuList(children, level + 1, In);
                var current = !!(e.go && e.go == this.pathname);
                var selected = In.selected || current;
                if (selected)
                    out.selected = 1;
                var expanded = e.expanded || selected;
                return (React.createElement("li", { className: (selected ? 'active-link ' : '') + (expanded ? 'active' : ''), key: key, onClick: () => e.go && this.setState({ pathname: e.go }) },
                    React.createElement(Link, { to: children.length ? '#' : e.go || '#', className: current ? 'hover' : '' },
                        React.createElement("i", { className: e.icon || '' }),
                        React.createElement("span", { className: "menu-title" },
                            e.bold && !level ? React.createElement("strong", null, e.title) : e.title,
                            e.label ? React.createElement("span", { className: `label pull-right ` + (e.color && e.color[0] != '#' ? e.color : ''), style: e.color && e.color[0] == '#' ? { background: e.color } : {} }, e.label) : !children.length && ('num' in e) ?
                                React.createElement("span", { className: "pull-right badge badge-warning" }, e.num) : null),
                        children.length && !e.label ? React.createElement("i", { className: "arrow" }) : null),
                    children.length ?
                        React.createElement("ul", { className: 'collapse ' + (expanded ? 'in' : '') }, ch) : null));
            }
        });
    }
    render() {
        return (React.createElement("nav", { id: "mainnav-container" },
            React.createElement("div", { id: "mainnav" },
                React.createElement("div", { id: "mainnav-menu-wrap" },
                    React.createElement("div", { className: "nano" },
                        React.createElement("div", { className: "nano-content", style: { paddingTop: 0 } },
                            this.renderProfile(),
                            this.renderShortcut(),
                            React.createElement("ul", { id: "mainnav-menu", className: "list-group" }, this._renderMenuList(this.renderMain(), 0, { selected: 0 })),
                            this.renderWidget()))))));
    }
    renderMain() {
        return [];
    }
    renderProfile() {
        return null;
    }
    renderShortcut() {
        return null;
    }
    renderWidget() {
        return null;
    }
}
