import * as tslib_1 from "tslib";
import * as React from 'react';
import { observer } from 'xmobx/mobx-react';
import state from './state';
import { IconByName } from './IconByName';
/**
 * @todo typings
 */
const MenuItemContext = React.createContext({
    title: '',
    className: '',
    renderIcon(DEFAULT) {
        return '';
    },
    onClick(DEFAULT) {
        //
    },
});
const { Provider, Consumer } = MenuItemContext;
/**
 * @todo probably would make more sense for this to be for the whole sidebar...
 */
let MenuItemProvider = class MenuItemProvider extends React.Component {
    render() {
        const { item } = this.props;
        const { name, title, link, dataQa } = item;
        const activeField = state.activeField;
        const isActive = activeField === name;
        const className = `account-category ${name}`;
        const onClick = () => state.handleClick(name, link);
        const renderIcon = () => {
            return React.createElement(IconByName, { iconName: name, isActive: isActive });
        };
        const context = {
            // could use to rename props even
            to: link,
            // easy
            className,
            isActive,
            onClick,
            title,
            renderIcon,
            dataQa,
        };
        return React.createElement(Provider, { value: context }, this.props.children);
    }
};
MenuItemProvider = tslib_1.__decorate([
    observer
], MenuItemProvider);
export { Consumer, Provider, MenuItemProvider, MenuItemContext };
//# sourceMappingURL=Context.js.map