var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import styled, { css } from 'react-emotion';
import { Icon } from '@bitbloq/ui';
var SubMenu = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  display: none;\n  top: 0px;\n  right: 1px;\n  background: white;\n  z-index: 10;\n  flex-direction: column;\n  transform: translate(100%, 0);\n  box-shadow: 0 12px 15px 1px rgba(0, 0, 0, 0.5);\n\n  ", ";\n"], ["\n  position: absolute;\n  display: none;\n  top: 0px;\n  right: 1px;\n  background: white;\n  z-index: 10;\n  flex-direction: column;\n  transform: translate(100%, 0);\n  box-shadow: 0 12px 15px 1px rgba(0, 0, 0, 0.5);\n\n  ",
    ";\n"])), function (props) {
    return props.isTop && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      left: 0px;\n      bottom: 0px;\n      top: inherit;\n      right: inherit;\n      transform: translate(0, 100%);\n    "], ["\n      left: 0px;\n      bottom: 0px;\n      top: inherit;\n      right: inherit;\n      transform: translate(0, 100%);\n    "])));
});
var OptionText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
var OptionIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: 12px;\n  svg {\n    width: 13px;\n  }\n"], ["\n  margin-right: 12px;\n  svg {\n    width: 13px;\n  }\n"])));
var RightArrow = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 12px;\n  transform: rotate(90deg);\n"], ["\n  margin-left: 12px;\n  transform: rotate(90deg);\n"])));
var Tick = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 12px;\n"], ["\n  margin-left: 12px;\n"])));
var Option = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  white-space: nowrap;\n  font-size: 14px;\n  height: 35px;\n  padding: 0px 12px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: #ebebeb;\n  }\n\n  &:hover > ", " {\n    display: flex;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  white-space: nowrap;\n  font-size: 14px;\n  height: 35px;\n  padding: 0px 12px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: #ebebeb;\n  }\n\n  &:hover > ", " {\n    display: flex;\n  }\n"])), SubMenu);
var MainOption = styled(Option)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 40px;\n\n  &:hover {\n    box-shadow: 0 12px 15px 1px rgba(0, 0, 0, 0.5);\n    z-index: 10;\n    background-color: white;\n  }\n"], ["\n  height: 40px;\n\n  &:hover {\n    box-shadow: 0 12px 15px 1px rgba(0, 0, 0, 0.5);\n    z-index: 10;\n    background-color: white;\n  }\n"])));
var Container = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  height: 40px;\n  padding: 0px 10px;\n  font-size: 14px;\n\n  ", "\n"], ["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  height: 40px;\n  padding: 0px 10px;\n  font-size: 14px;\n\n  ",
    "\n"])), function (props) { return props.disabled && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n      pointer-events: none;\n    }\n  "], ["\n    ", " {\n      pointer-events: none;\n    }\n  "])), MainOption); });
var MenuBar = /** @class */ (function (_super) {
    __extends(MenuBar, _super);
    function MenuBar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            disabled: false,
        };
        _this.onMouseOver = function () {
            _this.setState({ disabled: false });
        };
        return _this;
    }
    MenuBar.prototype.onOptionClick = function (option) {
        var onOptionClick = this.props.onOptionClick;
        this.setState({ disabled: true });
        if (onOptionClick) {
            onOptionClick(option);
        }
    };
    MenuBar.prototype.renderSubMenu = function (options, isTop) {
        var _this = this;
        return (React.createElement(SubMenu, { isTop: isTop }, options.map(function (option) { return (React.createElement(Option, { key: option.id, onClick: function () { return _this.onOptionClick(option); } },
            option.icon &&
                React.createElement(OptionIcon, null, option.icon),
            React.createElement(OptionText, null, option.label),
            option.children && React.createElement(RightArrow, null,
                React.createElement(Icon, { name: "arrow" })),
            option.children && _this.renderSubMenu(option.children),
            option.checked && React.createElement(Tick, null,
                React.createElement(Icon, { name: "tick" })))); })));
    };
    MenuBar.prototype.render = function () {
        var _this = this;
        var disabled = this.state.disabled;
        var options = this.props.options;
        return (React.createElement(Container, { disabled: disabled, onMouseOver: this.onMouseOver }, options.map(function (option) { return (React.createElement(MainOption, { key: option.id },
            React.createElement(OptionText, null, option.label),
            _this.renderSubMenu(option.children, true))); })));
    };
    return MenuBar;
}(React.Component));
export default MenuBar;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
//# sourceMappingURL=MenuBar.js.map