'use strict';

exports.__esModule = true;

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _IsVisible = require('../IsVisible');

var _IsVisible2 = _interopRequireDefault(_IsVisible);

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

/**
 * Dropdown is component for rendering dropdown menu
 * @param props
 * @returns {XML}
 * @constructor
 */

var Dropdown = function (_React$Component) {
  (0, _inherits3.default)(Dropdown, _React$Component);

  function Dropdown() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Dropdown);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      selected: [],
      isOpen: false
    }, _this.getChildContext = function () {
      return {
        isOpen: _this.state.isOpen,
        selected: _this.state.selected
      };
    }, _this.toggleOpen = function () {
      var nextOpenState = !_this.state.isOpen;

      _this.setState({ isOpen: nextOpenState });
    }, _this.handleClick = function (e, value) {
      var node = _reactDom2.default.findDOMNode(_this);
      var target = e.target;

      if (e.button === 2) {
        return e.stopPropagation();
      }

      var selected = _this.state.selected;

      var isActive = selected.includes(value);

      if (!node.contains(target) || target.nodeName === 'A') {
        _this.setState({ isOpen: false });
      }

      if (isActive) return;

      if (isActive) {
        _this.setState({ selected: selected.filter(function (v) {
            return v !== value;
          }) });
      } else if (!isActive) {
        _this.setState({ selected: [value] });
      } else {
        _this.setState({ selected: [].concat(selected, [value]) });
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Dropdown.prototype.componentWillUpdate = function componentWillUpdate(nextProps, nextState) {
    if (this.state.isOpen === nextState.isOpen) {
      return;
    }

    if (nextState.isOpen) {
      window.addEventListener('click', this.handleClick);
    } else {
      window.removeEventListener('click', this.handleClick);
    }
  };

  Dropdown.prototype.render = function render() {
    var _this2 = this;

    var children = this.props.children;
    var isOpen = this.state.isOpen;


    var renderChildren = function renderChildren() {
      return _react2.default.Children.map(children, function (child) {

        if (child.props.type === 'button') {
          return _react2.default.cloneElement(child, {
            onClick: function onClick() {
              return _this2.toggleOpen();
            },
            className: 'top-bar__user cui-dropdown-toggle dropdown-toggle'
          });
        } else if (child.type.displayName === 'List') {
          return _react2.default.createElement(
            _IsVisible2.default,
            { isOpen: isOpen },
            _react2.default.cloneElement(child, {
              className: 'dropdown-menu'
            })
          );
        }

        return child;
      });
    };

    return _react2.default.createElement(
      'div',
      {
        'cui-dropdown': 'cui-dropdown',
        className: 'cui-dropdown' + ('' + (isOpen && ' open' || ''))
      },
      renderChildren()
    );
  };

  return Dropdown;
}(_react2.default.Component);

Dropdown.displayName = 'Dropdown';
exports.default = Dropdown;


Dropdown.childContextTypes = {
  /** Whether menu isOpen or not. */
  isOpen: _propTypes2.default.bool,
  /** OnClick function for button. */
  onClick: _propTypes2.default.func,
  /** Array/Object of Selected items. */
  selected: _propTypes2.default.any
};

Dropdown.defaultProps = {
  onClick: null,
  selected: null,
  isOpen: false,
  children: null
};

module.exports = exports['default'];