(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'classnames', './px-app-nav-item', '../BaseComponent', '../IconSet/Icon', './px-app-nav-sub-group', './styles/index.scss'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('classnames'), require('./px-app-nav-item'), require('../BaseComponent'), require('../IconSet/Icon'), require('./px-app-nav-sub-group'), require('./styles/index.scss'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.classnames, global.pxAppNavItem, global.BaseComponent, global.Icon, global.pxAppNavSubGroup, global.index);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _classnames, _pxAppNavItem, _BaseComponent2, _Icon, _pxAppNavSubGroup, _index) {
  'use strict';

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

  var _react2 = _interopRequireDefault(_react);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _pxAppNavItem2 = _interopRequireDefault(_pxAppNavItem);

  var _BaseComponent3 = _interopRequireDefault(_BaseComponent2);

  var _Icon2 = _interopRequireDefault(_Icon);

  var _pxAppNavSubGroup2 = _interopRequireDefault(_pxAppNavSubGroup);

  var _index2 = _interopRequireDefault(_index);

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

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

  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;
    };
  }();

  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 AppNav = function (_BaseComponent) {
    _inherits(AppNav, _BaseComponent);

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

      var _this = _possibleConstructorReturn(this, (AppNav.__proto__ || Object.getPrototypeOf(AppNav)).call(this, props, { displayName: 'AppNav' }));

      _this.state = {
        selected: props.selected || 0,
        onlyShowIcon: props.onlyShowIcon || props.vertical,
        selectedIndex: props.selectedIndex || null,
        selectedItem: props.selectedItem || null,
        vertical: props.vertical || false,
        verticalOpened: props.verticalOpened || !props.vertical,
        propForSelect: props.propForSelect
      };
      _this._items = [];
      _this._keys = [];

      _this._handleRef = _this._handleRef.bind(_this);
      _this._handleMouseEnter = _this._handleMouseEnter.bind(_this);
      _this._handleMouseExit = _this._handleMouseExit.bind(_this);
      return _this;
    }

    _createClass(AppNav, [{
      key: 'componentDidMount',
      value: function componentDidMount() {
        if (this.base && this.vertical) {
          this.base.addEventListener('mouseleave', this._handleMouseExit);
          this.base.addEventListener('mouseenter', this._handleMouseEnter);
        }
      }
    }, {
      key: 'componentWillMount',
      value: function componentWillMount(props) {
        var _this2 = this;

        if (this.props.items) {
          this.props.items.map(function (item, index) {
            _this2._keys.push(_this2.props.propForSelect ? item[_this2.props.propForSelect] : index);
            _this2._items.push(item);
          });
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        if (this.base && this.vertical) {
          this.base.removeEventListener('mouseleave', this._handleMouseExit);
          this.base.removeEventListener('mouseenter', this._handleMouseEnter);
        }
      }
    }, {
      key: '_handleRef',
      value: function _handleRef(el) {
        this.base = el;
      }
    }, {
      key: '_handleMouseEnter',
      value: function _handleMouseEnter(e) {
        if (!this.state.vertical) {
          return;
        }
        this._mouseIsOverNav = true;
        if (this._mouseIsOverNav && !this.state.verticalOpened) {
          this._setVerticalOpened(true);
        }
      }
    }, {
      key: '_handleMouseExit',
      value: function _handleMouseExit(e) {
        if (!this.state.vertical) {
          return;
        }
        this._mouseIsOverNav = false;
        if (!this._mouseIsOverNav && this.state.verticalOpened) {
          this._setVerticalOpened(false);
        }
      }
    }, {
      key: '_setVerticalOpened',
      value: function _setVerticalOpened(bool) {
        this.setState({
          verticalOpened: bool,
          onlyShowIcon: !bool
        });
      }
    }, {
      key: '_getIndexForValue',
      value: function _getIndexForValue(val) {
        return this._keys.indexOf(val);
      }
    }, {
      key: '_getValueForIndex',
      value: function _getValueForIndex(index) {
        return this._items[index];
      }
    }, {
      key: '_getItemFromValue',
      value: function _getItemFromValue(index) {
        return this._getValueForIndex(this._getIndexForValue(index));
      }
    }, {
      key: 'handleClick',
      value: function handleClick(val, child, isSubItem) {

        var propForSelect = this.props.propForSelect ? child[this.props.propForSelect] : val;
        var index = this.props.propForSelect ? child[this.props.propForSelect] : this._getIndexForValue(propForSelect);
        var item = this._getValueForIndex(index);

        if (child && child.hasOwnProperty('children') && !isSubItem) {
          return;
        }
        if (isSubItem) {
          item = val;
        }

        var state = {
          selected: propForSelect,
          selectedIndex: this._getIndexForValue(propForSelect),
          selectedItem: child
        };

        this.setState(state);
        if (this.props.onChange) {
          this.props.onChange(state);
        }
      }
    }, {
      key: '_reset',
      value: function _reset() {
        this._items = [];
        this._keys = [];
      }
    }, {
      key: '_getItemFromPropForSelect',
      value: function _getItemFromPropForSelect(value) {
        var _this3 = this;

        var item = this.props.items.filter(function (val) {
          return val[_this3.props.propForSelect] === value;
        });
        return item ? item[0] : null;
      }
    }, {
      key: '_renderItem',
      value: function _renderItem(child, index) {
        var propForSelect = this.props.propForSelect ? child[this.props.propForSelect] : index;
        this._keys.push(propForSelect);
        this._items.push(child);
        var selected = this.state.selected === this._getIndexForValue(propForSelect);
        if (!child.children) {
          return _react2.default.createElement(_pxAppNavItem2.default, {
            key: index,
            item: child,
            id: child.id,
            icon: child.icon,
            label: child.label,
            selected: selected,
            onlyShowIcon: this.state.onlyShowIcon,
            onClick: this.handleClick.bind(this, propForSelect, child)
          });
        } else {
          return _react2.default.createElement(_pxAppNavSubGroup2.default, {
            key: index,
            id: child.id,
            item: child,
            icon: child.icon,
            label: child.label,
            onlyShowIcon: this.state.onlyShowIcon,
            selected: selected,
            onClick: this.handleClick.bind(this, propForSelect, child)
          });
        }
      }
    }, {
      key: '_renderItems',
      value: function _renderItems(items) {
        this._reset();
        return items.map(this._renderItem.bind(this));
      }
    }, {
      key: 'render',
      value: function render() {
        var _props = this.props,
            classes = _props.classes,
            style = _props.style,
            items = _props.items,
            selected = _props.selected,
            selectedItem = _props.selectedItem,
            onChange = _props.onChange,
            children = _props.children;
        var _state = this.state,
            vertical = _state.vertical,
            verticalOpened = _state.verticalOpened;


        var baseClasses = (0, _classnames2.default)('px-app-nav', { 'vertical': vertical }, { 'vertical-opened': vertical && verticalOpened });

        var appNavClasses = (0, _classnames2.default)('app-nav');

        return _react2.default.createElement(
          'nav',
          { className: baseClasses, style: style, ref: this._handleRef },
          _react2.default.createElement(
            'div',
            { className: appNavClasses },
            _react2.default.createElement(
              'div',
              { className: 'app-nav__items' },
              this._renderItems(items)
            ),
            _react2.default.createElement(
              'div',
              { className: 'app-nav__actions' },
              children
            )
          )
        );
      }
    }]);

    return AppNav;
  }(_BaseComponent3.default);

  AppNav.defaultProps = {
    vertical: false,
    collapseAll: false,
    collapseAt: null,
    collapseWithIcon: false,
    onlyShowIcon: false,
    collapseOpened: false,
    verticalOpened: false,
    selected: 0,
    selectedItem: null,
    visibleItems: null,
    items: null,
    opened: null
  };

  exports.default = AppNav;
});