"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _menu = require("../menu");

var _menu2 = _interopRequireDefault(_menu);

require("@whalecloud/fdx-theme-fdx/context-menu.less");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var SubMenu = _menu2["default"].SubMenu;

var ContextMenu = function (_React$Component) {
    (0, _inherits3["default"])(ContextMenu, _React$Component);

    function ContextMenu() {
        (0, _classCallCheck3["default"])(this, ContextMenu);

        var _this = (0, _possibleConstructorReturn3["default"])(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 _react2["default"].createElement(
                        SubMenu,
                        { disabled: item.disable || false, title: item.label, key: item.key },
                        _this.renderMenu(item.children)
                    );
                }
                return _react2["default"].createElement(
                    _menu2["default"].Item,
                    { disabled: item.disable || false, key: item.key },
                    item.label
                );
            });
        };
        return _this;
    }

    (0, _createClass3["default"])(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) && _react2["default"].createElement(
                "div",
                { className: "context-menu", ref: function ref(_ref) {
                        _this3.root = _ref;
                    } },
                _react2["default"].createElement(
                    _menu2["default"],
                    { onClick: onChange, style: style ? style : null, mode: "vertical" },
                    this.renderMenu(this.props.options)
                )
            );
        }
    }]);
    return ContextMenu;
}(_react2["default"].Component);

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

    return [_react2["default"].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() {}
};
exports["default"] = ContextMenu;
module.exports = exports['default'];