"use strict";

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactOnclickoutside = require("react-onclickoutside");

var _reactOnclickoutside2 = _interopRequireDefault(_reactOnclickoutside);

var _ButtonGroup = require("../ButtonGroup");

var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);

var _DropdownLink = require("./DropdownLink");

var _DropdownLink2 = _interopRequireDefault(_DropdownLink);

var _DropdownTip = require("./DropdownTip");

var _DropdownTip2 = _interopRequireDefault(_DropdownTip);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var DropdownContainer = _styledComponents2.default.div.withConfig({
  displayName: "MenuDropdown__DropdownContainer"
})(["flex-direction:column;padding:0.75rem 1.5rem;background-color:#fff;position:absolute;left:0;top:", "px;transform:translateX(", "px) translateY(", "px);transition:all 0.3s ease-in-out;border-radius:var(--lgBorderRadius);z-index:1000;box-shadow:0 10px 60px -10px rgba(0,0,0,0.25),0 8px 16px rgba(0,0,0,0.1);min-width:15rem;"], function (props) {
  return props.dropdownTop;
}, function (props) {
  return props.x;
}, function (props) {
  return props.y;
});

var Dropdown = function Dropdown(props) {
  if (props.kind in props.map) {
    var component = props.map[props.kind].component;

    return _react2.default.createElement(
      DropdownContainer,
      { dropdownTop: props.dropdownTop, x: props.x || 0, y: props.y || 0 },
      (typeof component === "undefined" ? "undefined" : _typeof(component)) === "object" ? component : _react2.default.createElement(component)
    );
  } else {
    return null;
  }
};

var MenuDropdown = function (_PureComponent) {
  _inherits(MenuDropdown, _PureComponent);

  function MenuDropdown(props) {
    _classCallCheck(this, MenuDropdown);

    var _this = _possibleConstructorReturn(this, (MenuDropdown.__proto__ || Object.getPrototypeOf(MenuDropdown)).call(this, props));

    _this.state = {
      dropDown: null,
      products: {
        left: 0,
        top: 0,
        height: 0
      },
      markets: {
        left: 0,
        top: 0,
        height: 0
      }
    };

    _this.handleMouseMove = function (e) {
      _this.mouseX = e.clientX;
      _this.mouseY = e.clientY;
    };

    _this.handleMouseLeave = function (e) {
      if (window) {
        window.setTimeout(_this.checkPointer, 500);
      }
    };

    _this.checkPointer = function () {
      var elem = document && document.elementFromPoint(_this.mouseX, _this.mouseY);
      if (elem && _this.ref && _this.ref.current) {
        if (!_this.ref.current.contains(elem)) {
          _this.setState({ dropDown: null });
        }
      }
    };

    _this.handleClickOutside = function (evt) {
      _this.setState({ dropDown: null });
    };

    _this.mouseX = 0;
    _this.mouseY = 0;
    _this.ref = _react2.default.createRef();
    return _this;
  }

  _createClass(MenuDropdown, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (document) {
        document.addEventListener("mousemove", this.handleMouseMove);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (document) {
        document.removeEventListener("mousemove", this.handleMouseMove);
      }
    }
  }, {
    key: "toggleDropdown",
    value: function toggleDropdown(name, onlyOn) {
      var _this2 = this;

      return function (e) {
        var dropDownVal = null;
        if (typeof name === "string") {
          if (_this2.state.dropDown === name && !onlyOn) {
            dropDownVal = null;
          } else {
            dropDownVal = name;
          }
        } else {
          dropDownVal = null;
        }
        if (dropDownVal && _this2.state.dropDown !== dropDownVal) {
          if (dropDownVal in _this2.props.map && _this2.props.map[dropDownVal].onActive) {
            _this2.props.map[dropDownVal].onActive();
          }
        }
        _this2.setState({ dropDown: dropDownVal });
      };
    }
  }, {
    key: "getLink",
    value: function getLink(kind, name) {
      var _this3 = this;

      return _react2.default.createElement(
        "li",
        { key: kind },
        _react2.default.createElement(
          _DropdownLink2.default,
          {
            callback: function callback(_ref) {
              var left = _ref.left,
                  top = _ref.top,
                  height = _ref.height;

              _this3.setState(_defineProperty({}, kind, { left: left, top: top, height: height }));
            },
            onClick: this.toggleDropdown(kind),
            onMouseOver: this.toggleDropdown(kind, true) },
          name
        )
      );
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var dropX = 0;
      var dropY = 0;
      var dropdownTip = null;
      var dropdownTop = this.props.dropdownTop;

      if (this.state.dropDown !== null) {
        var kind = this.state.dropDown;
        dropX = this.state[kind].left;
        dropY = this.state[kind].top + this.state[kind].height + 10;
        dropdownTip = _react2.default.createElement(_DropdownTip2.default, { dropdownTop: dropdownTop, x: dropX + 24, y: dropY - 4 });
      }

      return _react2.default.createElement(
        "div",
        { ref: this.ref, onMouseLeave: this.handleMouseLeave },
        _react2.default.createElement(
          _ButtonGroup2.default,
          null,
          _react2.default.createElement(
            "ul",
            null,
            Object.keys(this.props.map).map(function (name) {
              var vals = _this4.props.map[name];
              return _this4.getLink(name, vals.linkText);
            })
          )
        ),
        dropdownTip,
        _react2.default.createElement(Dropdown, {
          x: dropX,
          y: dropY,
          dropdownTop: dropdownTop,
          kind: this.state.dropDown,
          map: this.props.map
        })
      );
    }
  }]);

  return MenuDropdown;
}(_react.PureComponent);

exports.default = (0, _reactOnclickoutside2.default)(MenuDropdown);