(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'classnames', '../BaseComponent', '../IconSet/Icon', 'styled-components', '../Button'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('classnames'), require('../BaseComponent'), require('../IconSet/Icon'), require('styled-components'), require('../Button'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.classnames, global.BaseComponent, global.Icon, global.styledComponents, global.Button);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _classnames, _BaseComponent2, _Icon, _styledComponents, _Button) {
  'use strict';

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

  var _react2 = _interopRequireDefault(_react);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _BaseComponent3 = _interopRequireDefault(_BaseComponent2);

  var _Icon2 = _interopRequireDefault(_Icon);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  var _Button2 = _interopRequireDefault(_Button);

  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 _templateObject = _taggedTemplateLiteral(['\n  height: 2em;\n  width: 100%;\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid var(--px-input-border-color--outer,#889aa5);\n  padding: 0 .33333rem;\n  color: var(--px-input-text-color,#2c404c);\n  &:focus{\n    border-color: var(--px-input-border-color--outer--focused,#007acc);\n    background-color: var(--px-input-background-color--focused,#eefbff);\n    color: var(--px-input-text-color--focused,inherit);\n  }\n'], ['\n  height: 2em;\n  width: 100%;\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid var(--px-input-border-color--outer,#889aa5);\n  padding: 0 .33333rem;\n  color: var(--px-input-text-color,#2c404c);\n  &:focus{\n    border-color: var(--px-input-border-color--outer--focused,#007acc);\n    background-color: var(--px-input-background-color--focused,#eefbff);\n    color: var(--px-input-text-color--focused,inherit);\n  }\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n  overflow: hidden;\n  flex-grow: 1;\n  text-overflow: ellipsis;\n  text-align: left;\n  ~ i{\n    margin-left: .5rem; \n  }\n'], ['\n  overflow: hidden;\n  flex-grow: 1;\n  text-overflow: ellipsis;\n  text-align: left;\n  ~ i{\n    margin-left: .5rem; \n  }\n']),
      _templateObject3 = _taggedTemplateLiteral(['\n  z-index: 10;\n  position: absolute;\n  background-color: var(--px-dropdown-bg-color,#fff);\n  border: 1px solid var(--px-dropdown-border-color,gray);\n  max-height: var(--px-dropdown-max-height,300px);\n  max-width: var(--px-dropdown-max-width,400px);\n  min-width: var(--px-dropdown-min-width);\n  min-height: var(--px-dropdown-min-height);\n  display: flex;\n  flex-direction: column;\n  display: none;\n  ', '\n  \n  ', '\n  \n'], ['\n  z-index: 10;\n  position: absolute;\n  background-color: var(--px-dropdown-bg-color,#fff);\n  border: 1px solid var(--px-dropdown-border-color,gray);\n  max-height: var(--px-dropdown-max-height,300px);\n  max-width: var(--px-dropdown-max-width,400px);\n  min-width: var(--px-dropdown-min-width);\n  min-height: var(--px-dropdown-min-height);\n  display: flex;\n  flex-direction: column;\n  display: none;\n  ', '\n  \n  ', '\n  \n']),
      _templateObject4 = _taggedTemplateLiteral(['\n    display: block;\n  '], ['\n    display: block;\n  ']),
      _templateObject5 = _taggedTemplateLiteral(['\n    width: width;\n  '], ['\n    width: width;\n  ']),
      _templateObject6 = _taggedTemplateLiteral(['\n    padding-left: var(--px-dropdown-item-padding,.66667rem);\n    padding-right: var(--px-dropdown-item-padding,.66667rem);\n    padding-top: var(--px-dropdown-item-padding);\n    padding-bottom: var(--px-dropdown-item-padding);\n    height: var(--px-dropdown-item-height,2rem);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    &:hover {\n      background-color: var(--px-dropdown-bg-color--hover,#d3d3d3);\n    }\n    &.selected,\n    &:active {\n      background-color: var(--px-dropdown-bg-color--selected,#00f);\n      color: var(--px-dropdown-text-color--selected,#fff);\n    }\n    ', '\n    \n    ', '\n'], ['\n    padding-left: var(--px-dropdown-item-padding,.66667rem);\n    padding-right: var(--px-dropdown-item-padding,.66667rem);\n    padding-top: var(--px-dropdown-item-padding);\n    padding-bottom: var(--px-dropdown-item-padding);\n    height: var(--px-dropdown-item-height,2rem);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    &:hover {\n      background-color: var(--px-dropdown-bg-color--hover,#d3d3d3);\n    }\n    &.selected,\n    &:active {\n      background-color: var(--px-dropdown-bg-color--selected,#00f);\n      color: var(--px-dropdown-text-color--selected,#fff);\n    }\n    ', '\n    \n    ', '\n']),
      _templateObject7 = _taggedTemplateLiteral(['\n      color: var(--px-dropdown-text-color--disabled,gray);\n      background-color: var(--px-dropdown-bg-color--disabled,transparent);\n      cursor: not-allowed;\n      pointer-events: none;\n    '], ['\n      color: var(--px-dropdown-text-color--disabled,gray);\n      background-color: var(--px-dropdown-bg-color--disabled,transparent);\n      cursor: not-allowed;\n      pointer-events: none;\n    ']),
      _templateObject8 = _taggedTemplateLiteral(['\n      background-color: var(--px-dropdown-bg-color--selected,#00f);\n      color: var(--px-dropdown-text-color--selected,#fff);\n      &:hover {\n        background-color: var(--px-dropdown-bg-color--selected,#00f);\n        color: var(--px-dropdown-text-color--selected,#fff);\n      }\n    '], ['\n      background-color: var(--px-dropdown-bg-color--selected,#00f);\n      color: var(--px-dropdown-text-color--selected,#fff);\n      &:hover {\n        background-color: var(--px-dropdown-bg-color--selected,#00f);\n        color: var(--px-dropdown-text-color--selected,#fff);\n      }\n    ']),
      _templateObject9 = _taggedTemplateLiteral(['\n  max-width: inherit;\n  width: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-left: .66667rem;\n  padding-right: .66667rem;\n  outline: 0;\n  font-weight: var(--px-dropdown-font-weight,normal);\n  height: auto;\n'], ['\n  max-width: inherit;\n  width: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-left: .66667rem;\n  padding-right: .66667rem;\n  outline: 0;\n  font-weight: var(--px-dropdown-font-weight,normal);\n  height: auto;\n']);

  function _taggedTemplateLiteral(strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }

  var SearchInput = _styledComponents2.default.input(_templateObject);

  var DropdownLabel = _styledComponents2.default.div(_templateObject2);
  DropdownLabel.displayName = 'DropdownLabel';
  DropdownLabel.defaultProps = {
    className: 'px-dropdown__label'
  };

  var DropdownContent = _styledComponents2.default.div(_templateObject3, function (props) {
    return props.opened && (0, _styledComponents.css)(_templateObject4);
  }, function (props) {
    return props.width && (0, _styledComponents.css)(_templateObject5);
  });
  DropdownContent.displayName = 'DropdownContent';
  DropdownContent.defaultProps = {
    className: 'px-dropdown__content'
  };

  var DropdownOption = _styledComponents2.default.div(_templateObject6, function (props) {
    return props.disabled && (0, _styledComponents.css)(_templateObject7);
  }, function (props) {
    return props.selected && (0, _styledComponents.css)(_templateObject8);
  });
  DropdownOption.displayName = 'DropdownOption';
  DropdownOption.defaultProps = {
    className: 'px-dropdown__option'
  };

  var DropdownTrigger = _Button2.default.extend(_templateObject9);
  DropdownTrigger.displayName = 'DropdownTrigger';

  var Dropdown = function (_BaseComponent) {
    _inherits(Dropdown, _BaseComponent);

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

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

      _this.displayName = 'Dropdown';
      _this.state = {
        dropdownContentWidth: props.dropdownContentWidth || null,
        selected: props.selected || null,
        selectedItems: props.selectedItems || null,
        selectedValues: props.selectedValues || null,
        opened: props.opened || false,
        items: props.items || null
      };
      return _this;
    }

    _createClass(Dropdown, [{
      key: '_handleClick',
      value: function _handleClick(e) {
        if (e && e.target && e.target.classList.contains('px-utl-close')) {
          this._clearSelected();
          this.setState({
            selectedItem: null
          });
        } else {
          this.setState({ opened: !this.state.opened });
        }
      }
    }, {
      key: '_clearSelected',
      value: function _clearSelected() {
        var items = this.state.items;
        items.map(function (item) {
          return item.selected = false;
        });
        this.setState({ items: items });
      }
    }, {
      key: '_handleChange',
      value: function _handleChange(item, index, e) {
        if (item.disabled) {
          return;
        }
        this.setState({
          selectedItem: item
        });

        if (!this.props.multi) {
          this._clearSelected();
          this._handleClick();
        } else {}
        var items = this.state.items[index].selected = !this.state.items[index].selected;
        if (this.props.onChange) {
          this.props.onChange(item, index, e);
        }
      }
    }, {
      key: 'handleClear',
      value: function handleClear() {
        this.setState({
          selectedItem: null
        });
      }
    }, {
      key: '_handleDropdownContentRef',
      value: function _handleDropdownContentRef(el) {
        this.dropdownContent = el;
      }
    }, {
      key: 'render',
      value: function render() {
        var _this2 = this;

        var _props = this.props,
            selectBy = _props.selectBy,
            disabled = _props.disabled,
            disableClear = _props.disableClear,
            hover = _props.hover,
            icon = _props.icon,
            triggerHeight = _props.triggerHeight,
            focusedItem = _props.focusedItem,
            hideChevron = _props.hideChevron,
            buttonStyle = _props.buttonStyle,
            boundTarget = _props.boundTarget,
            preventCloseOnOutsideClick = _props.preventCloseOnOutsideClick,
            displayValue = _props.displayValue,
            multi = _props.multi,
            children = _props.children;


        var triggerStyle = {
          height: triggerHeight
        };
        var _state = this.state,
            opened = _state.opened,
            items = _state.items,
            selectedItem = _state.selectedItem,
            selectedItems = _state.selectedItems,
            selectedValues = _state.selectedValues,
            selected = _state.selected,
            dropdownContentWidth = _state.dropdownContentWidth;


        var baseClasses = (0, _classnames2.default)('px-dropdown');
        return _react2.default.createElement(
          'div',
          { className: baseClasses },
          _react2.default.createElement(
            _Button2.default,
            { theme: buttonStyle, disabled: disabled, style: triggerStyle, onClick: this._handleClick.bind(this) },
            selectedItem && _react2.default.createElement(
              DropdownLabel,
              null,
              selectedItem.val
            ),
            !selectedItem && _react2.default.createElement(
              DropdownLabel,
              null,
              displayValue
            ),
            (!hideChevron && !opened || !selectedItem) && _react2.default.createElement(_Icon2.default, { icon: icon, size: 16 }),
            !disableClear && selectedItem && opened && _react2.default.createElement(_Icon2.default, { icon: 'px-utl:close', size: 16, onClick: this.handleClear.bind(this) })
          ),
          _react2.default.createElement(
            DropdownContent,
            { opened: opened, width: dropdownContentWidth },
            items && items.map(function (item, index) {
              return _react2.default.createElement(
                DropdownOption,
                {
                  disabled: item.disabled,
                  selected: item.selected,
                  onClick: _this2._handleChange.bind(_this2, item, index),
                  key: item.key },
                item.val
              );
            })
          )
        );
      }
    }]);

    return Dropdown;
  }(_BaseComponent3.default);

  Dropdown.defaultProps = {
    icon: 'px-utl:chevron'
  };

  Dropdown.displayName = 'Dropdown';

  exports.default = Dropdown;
});