import "core-js/modules/es6.object.assign";
import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";

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

/**
 * @category controls
 * @component time-picker
 * @variations collab-ui-react
 */
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Button, EventOverlay, Icon, List } from "./..";
import { isEqual, filter, find, uniqueId } from 'lodash';

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 || 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 = find(selected, {
        value: value,
        label: label
      });
      !isMulti && _this.setState({
        isOpen: false
      });
      if (isActive && !isMulti) return;

      if (isActive && isMulti) {
        return _this.setState({
          selected: filter(selected, function (item) {
            return !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: selected.concat([{
            value: value,
            label: label
          }]),
          selectedIndex: selectedIndex.concat([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.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.createElement("div", {
      className: "cui-select__label",
      id: id + "__label"
    }, currentValue() || defaultValue, React.createElement(Icon, {
      name: "arrow-down_16"
    }));
    var text = React.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.createElement(EventOverlay, _extends({
      allowClickAway: true,
      anchorNode: anchorNode,
      close: this.hidePopover,
      isOpen: isOpen,
      isDynamic: isDynamic
    }, overlayProps), React.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.createElement("div", {
      className: "cui-input-group cui-select"
    }, text, dropdownElement);
  };

  return Select;
}(React.Component);

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

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

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

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

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

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

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

  /** @prop Sets the EventOverlay props | null */
  overlayProps: PropTypes.shape({})
};
Select.defaultProps = {
  children: null,
  className: '',
  defaultValue: '',
  id: null,
  isDynamic: true,
  isMulti: false,
  onSelect: null,
  overlayProps: null
};
Select.displayName = 'Select';
export default Select;
/**
* @name Default Select
* @description Selects can be used for single or multi-select
*
* @category controls
* @component select
* @section default
*
* @js
import { Select, SelectOption } from '@collab-ui/react';

export default class DefaultSelect extends React.PureComponent {
  render() {
    return (
      <div className="medium-6 columns">
        <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>
      </div>
    );
  }
}

**/

/**
* @name Multi-Select
* @description Selects can be used for multi-select
*
* @category controls
* @component select
* @section multi-select
*
* @js
import { Select, SelectOption } from '@collab-ui/react';

export default class DefaultSelect extends React.PureComponent {
  render() {
    return (
      <div className="medium-6 columns">
        <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>
      </div>
    );
  }
}

**/

/**
* @name Disabled
* @description Selects can be disabled
*
* @category controls
* @component select
* @section disabled
*
* @js
import { Select, SelectOption } from '@collab-ui/react';

export default class DisabledSelect extends React.PureComponent {
  render() {
    return (
      <div className="medium-6 columns">
        <Select defaultValue='Select Item Here' disabled>
          <SelectOption value='test1' label='test1' />
          <SelectOption value='test2' label='test2' />
          <SelectOption value='test3' label='test3' />
          <SelectOption value='test4' label='test4' />
        </Select>
      </div>
    );
  }
}

**/