import * as tslib_1 from "tslib";
import React from 'react';
import { observer } from 'xmobx/mobx-react';
import { NO_OP } from 'exotic';
import { DropdownContainer, DropdownTitle, DropdownBodyElement } from './styled';
let MenuDropdown = class MenuDropdown extends React.Component {
    constructor() {
        super(...arguments);
        this.toggle = () => {
            console.debug('[menuGroup] toggle');
            if (this.props.item.isVisible === true) {
                this.hide();
            }
            else {
                this.show();
            }
            this.props.onClick(this.props.item);
        };
        this.show = (event) => {
            // console.debug('[menuGroup] show')
            this.props.item.setIsVisible(true);
        };
        this.hide = (event) => {
            // console.debug('[menuGroup] hide')
            this.props.item.setIsVisible(false);
        };
    }
    // handleMouseEvent = (event: React.MouseEvent<any>) => {
    //   this.item.isSelected = false
    // }
    render() {
        const eventAttributes = {
            // === @todo debounce these for when the page first loads
            // it will show if you keep mouse on the same area...
            // in
            onFocus: this.show,
            onMouseOver: this.show,
            // out
            // onMouseOut: this.hide,
            // onBlur: this.hide,
            // fixes touch enabled devices
            onClick: this.toggle,
        };
        const { className, title, icon, item } = this.props;
        const { identifier, children = item.categories, isVisible } = item;
        const identifierItem = identifier + '-nav-dropdown-item';
        const identifierTitle = identifierItem + 'title';
        const bodyView = children.length > 0 && (React.createElement(DropdownBodyElement, Object.assign({}, eventAttributes, { id: identifierItem, isVisible: isVisible, "aria-expanded": isVisible, "aria-labelledby": identifierTitle, role: 'listbox' }), this.props.children));
        const textView = (React.createElement(DropdownTitle, Object.assign({}, eventAttributes, { id: identifierTitle, "aria-label": identifier, "aria-controls": identifierItem, "data-qa": "qa-topcategory", isVisible: isVisible }),
            title,
            icon));
        // more like isActive
        return (React.createElement(DropdownContainer, { isVisible: isVisible },
            textView,
            bodyView));
    }
};
MenuDropdown.defaultProps = {
    children: [],
    title: '',
    isTouchEnabled: true,
    // isVisible: false,
    onClick: NO_OP,
    icon: null,
};
MenuDropdown = tslib_1.__decorate([
    observer
], MenuDropdown);
export default MenuDropdown;
//# sourceMappingURL=MenuDropDown.js.map