"use strict";

require("core-js/modules/es6.array.find");

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.object.assign");

require("core-js/modules/web.dom.iterable");

require("core-js/modules/es6.array.iterator");

require("core-js/modules/es6.object.keys");

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

var _lodash = require("lodash");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Select =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Select, _React$Component);

  function Select() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isOpen: false,
      selected: [],
      selectedIndex: [],
      anchorNode: null,
      anchorWidth: null,
      id: _this.props.id || (0, _lodash.uniqueId)('cui-select-')
    };

    _this.hidePopover = function () {
      _this.setState({
        isOpen: false
      });
    };

    _this.handleSelect = function (e, value, index, label) {
      e.preventDefault();
      var _this$state = _this.state,
          selected = _this$state.selected,
          selectedIndex = _this$state.selectedIndex;
      var isMulti = _this.props.isMulti;
      var isActive = (0, _lodash.find)(selected, {
        value: value,
        label: label
      });
      !isMulti && _this.setState({
        isOpen: false
      });
      if (isActive && !isMulti) return;

      if (isActive && isMulti) {
        return _this.setState({
          selected: (0, _lodash.filter)(selected, function (item) {
            return !(0, _lodash.isEqual)(item, {
              value: value,
              label: label
            });
          }),
          selectedIndex: selectedIndex.filter(function (i) {
            return i !== index;
          })
        });
      } else if (!isActive && !isMulti) {
        return _this.setState({
          selected: [{
            value: value,
            label: label
          }],
          selectedIndex: [index]
        });
      } else {
        return _this.setState({
          selected: [].concat(selected, [{
            value: value,
            label: label
          }]),
          selectedIndex: [].concat(selectedIndex, [index])
        });
      }
    };

    _this.choosePosition = function () {
      var _this$state2 = _this.state,
          isOpen = _this$state2.isOpen,
          anchorNode = _this$state2.anchorNode;
      isOpen && _this.setAnchorWidth(anchorNode);
    };

    _this.handleToggle = function () {
      _this.setState({
        isOpen: !_this.state.isOpen,
        anchorNode: _reactDom.default.findDOMNode(_this.clickTextField).parentNode
      }, function () {
        return _this.choosePosition();
      });
    };

    _this.setAnchorWidth = function (elementAnchor) {
      var anchor = elementAnchor && elementAnchor.getBoundingClientRect();

      _this.setState({
        anchorWidth: anchor.width
      });
    };

    return _this;
  }

  var _proto = Select.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    prevState.selected !== this.state.selected && this.props.onSelect && this.props.onSelect(this.state.selected);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        isDynamic = _this$props.isDynamic,
        isMulti = _this$props.isMulti,
        defaultValue = _this$props.defaultValue,
        overlayProps = _this$props.overlayProps,
        props = _objectWithoutPropertiesLoose(_this$props, ["children", "className", "isDynamic", "isMulti", "defaultValue", "overlayProps"]);

    var _this$state3 = this.state,
        selected = _this$state3.selected,
        selectedIndex = _this$state3.selectedIndex,
        isOpen = _this$state3.isOpen,
        anchorNode = _this$state3.anchorNode,
        anchorWidth = _this$state3.anchorWidth,
        id = _this$state3.id;

    var currentValue = function currentValue() {
      if (!isMulti && selected.length) return selected[0].label;

      if (selected.length === 1) {
        return selected.length + " Item Selected";
      } else if (selected.length) {
        return selected.length + " Items Selected";
      }
    };

    var label = _react.default.createElement("div", {
      className: "cui-select__label",
      id: id + "__label"
    }, currentValue() || defaultValue, _react.default.createElement(_.Icon, {
      name: "arrow-down_16"
    }));

    var text = _react.default.createElement(_.Button, _extends({
      name: id,
      id: id,
      onClick: this.handleToggle,
      ref: function ref(_ref) {
        return _this2.clickTextField = _ref;
      },
      className: 'cui-button--input' + ("" + (className && " " + className || '')),
      "aria-haspopup": "listbox",
      ariaLabelledBy: id + "__label",
      active: isOpen
    }, props), label);

    var dropdownElement = _react.default.createElement(_.EventOverlay, _extends({
      allowClickAway: true,
      anchorNode: anchorNode,
      close: this.hidePopover,
      isOpen: isOpen,
      isDynamic: isDynamic
    }, overlayProps), _react.default.createElement(_.List, {
      onSelect: this.handleSelect,
      style: {
        width: anchorWidth
      },
      ref: function ref(_ref2) {
        return _this2.list = _ref2;
      },
      role: "listbox",
      itemRole: "option",
      active: selectedIndex,
      isMulti: isMulti,
      "aria-labelledby": id + "__label",
      "aria-multiselectable": isMulti
    }, children));

    return _react.default.createElement("div", {
      className: "cui-input-group cui-select"
    }, text, dropdownElement);
  };

  return Select;
}(_react.default.Component);

Select.propTypes = {
  /** @prop Children nodes to render inside Select component | null */
  children: _propTypes.default.node,

  /** @prop Optional CSS class name | '' */
  className: _propTypes.default.string,

  /** @prop Set the default selected option | '' */
  defaultValue: _propTypes.default.string,

  /** @prop Set ID for Select Component | null */
  id: _propTypes.default.string,

  /** @prop Sets the Select EventOverlay to be dynamic | true */
  isDynamic: _propTypes.default.bool,

  /** @prop Optional prop to know if multiple Select children can be active | false */
  isMulti: _propTypes.default.bool,

  /** @prop Callback function invoked when user selects an item | null */
  onSelect: _propTypes.default.func,

  /** @prop Sets the EventOverlay props | null */
  overlayProps: _propTypes.default.shape({})
};
Select.defaultProps = {
  children: null,
  className: '',
  defaultValue: '',
  id: null,
  isDynamic: true,
  isMulti: false,
  onSelect: null,
  overlayProps: null
};
Select.displayName = 'Select';
var _default = Select;
/**
* @component select
* @section default
* @react
import { Select, SelectOption } from '@collab-ui/react';

export default class SelectDefault extends React.PureComponent {
  render() {
    return (
      <Select defaultValue='Select Item Here' >
        <SelectOption value='test1' label='test1' />
        <SelectOption value='test2' label='test2' />
        <SelectOption value='test3' label='test3' />
        <SelectOption value='test4' label='test4' />
      </Select>
    );
  }
}

**/

/**
* @component select
* @section multi-select
* @react
import { Select, SelectOption } from '@collab-ui/react';

export default class SelectMultiSelect extends React.PureComponent {
  render() {
    return (
      <Select isMulti defaultValue='Select Item Here' >
        <SelectOption value='test1' label='test1' />
        <SelectOption value='test2' label='test2' />
        <SelectOption value='test3' label='test3' />
        <SelectOption value='test4' label='test4' />
      </Select>
    );
  }
}

**/

exports.default = _default;