import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import Menu from '../menu';
import "@whalecloud/fdx-theme-fdx/context-menu.less";
var SubMenu = Menu.SubMenu;

var ContextMenu = function (_React$Component) {
    _inherits(ContextMenu, _React$Component);

    function ContextMenu() {
        _classCallCheck(this, ContextMenu);

        var _this = _possibleConstructorReturn(this, (ContextMenu.__proto__ || Object.getPrototypeOf(ContextMenu)).apply(this, arguments));

        _this.root = undefined;
        _this.state = {
            visible: false
        };
        _this._handleContextMenu = function (event) {
            event.preventDefault();
            _this.setState({ visible: true });
            var clickX = event.clientX;
            var clickY = event.clientY;
            _this.root.style.left = clickX + 5 + "px";
            _this.root.style.top = clickY + 5 + "px";
        };
        _this._handleClick = function () {
            var visible = _this.state.visible;

            if (visible) _this.setState({ visible: false });
        };
        _this._handleScroll = function () {
            var visible = _this.state.visible;

            if (visible) _this.setState({ visible: false });
        };
        _this.renderMenu = function (options) {
            return options.map(function (item) {
                if (Array.isArray(item.children) && item.children.length !== 0) {
                    return React.createElement(
                        SubMenu,
                        { disabled: item.disable || false, title: item.label, key: item.key },
                        _this.renderMenu(item.children)
                    );
                }
                return React.createElement(
                    Menu.Item,
                    { disabled: item.disable || false, key: item.key },
                    item.label
                );
            });
        };
        return _this;
    }

    _createClass(ContextMenu, [{
        key: "componentDidMount",
        value: function componentDidMount() {
            var _this2 = this;

            setTimeout(function () {
                var getContainer = _this2.props.getContainer;

                var container = getContainer() || document.body;
                container.addEventListener("contextmenu", _this2._handleContextMenu);
                container.addEventListener("scroll", _this2._handleScroll);
                document.addEventListener("click", _this2._handleClick);
            }, 0);
        }
    }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
            var getContainer = this.props.getContainer;

            var container = getContainer() || document.body;
            container.removeEventListener("contextmenu", this._handleContextMenu);
            document.removeEventListener("click", this._handleClick);
            container.removeEventListener("scroll", this._handleScroll);
        }
    }, {
        key: "render",
        value: function render() {
            var _this3 = this;

            var visible = this.state.visible;
            var _props = this.props,
                onChange = _props.onChange,
                style = _props.style;

            return (visible || null) && React.createElement(
                "div",
                { className: "context-menu", ref: function ref(_ref) {
                        _this3.root = _ref;
                    } },
                React.createElement(
                    Menu,
                    { onClick: onChange, style: style ? style : null, mode: "vertical" },
                    this.renderMenu(this.props.options)
                )
            );
        }
    }]);

    return ContextMenu;
}(React.Component);

ContextMenu.Option = function (_ref2) {
    var value = _ref2.value,
        children = _ref2.children;

    return [React.createElement(
        "span",
        null,
        children
    ), value];
};
ContextMenu.Group = function (_ref3) {
    var children = _ref3.children;

    return children;
};
ContextMenu.defaultProps = {
    getContainer: function getContainer() {
        return document.body;
    },
    onChange: function onChange() {}
};
export default ContextMenu;