'use strict';

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

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _debounce = require('lodash/fp/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

var _find = require('lodash/fp/find');

var _find2 = _interopRequireDefault(_find);

var _formatMessage = require('../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _Select = require('@instructure/ui-forms/lib/components/Select');

var _Select2 = _interopRequireDefault(_Select);

var _AccessibleContent = require('@instructure/ui-a11y/lib/components/AccessibleContent');

var _AccessibleContent2 = _interopRequireDefault(_AccessibleContent);

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

var AsyncSearch = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(AsyncSearch, _Component);

  function AsyncSearch() {
    (0, _classCallCheck3.default)(this, AsyncSearch);

    var _this = (0, _possibleConstructorReturn3.default)(this, (AsyncSearch.__proto__ || Object.getPrototypeOf(AsyncSearch)).apply(this, arguments));

    _this.state = {
      loading: false,
      emptyOption: 'Skriv til s\xF8gning',
      searchResult: [],
      searchInput: ''
    };

    _this.cleanResults = function () {
      return _this.setState({
        emptyOption: 'Skriv til s\xF8gning',
        searchResult: []
      });
    };

    _this.handleClose = function () {
      if (!_this.state.searchInput) {
        _this.cleanResults();
      }
    };

    _this.handleSearchInputChange = function (event, value) {
      _this.setState({
        searchInput: value,
        loading: !!value
      });

      if (!value) {
        _this.cleanResults();
      } else {
        _this.search(value);
      }
    };

    _this.handleSearchSelectionChange = function (event, newValues) {
      _this.props.onSelectionChange(newValues.map(function (_ref) {
        var id = _ref.id;
        return (0, _find2.default)({ uuid: id }, _this.state.searchResult) || (0, _find2.default)({ uuid: id }, _this.props.selectedOption);
      }));
    };

    _this.formatSelectedOption = function (option) {
      return _react2.default.createElement(
        _AccessibleContent2.default,
        { alt: 'Remove ' + option.label },
        option.label
      );
    };

    _this.search = (0, _debounce2.default)(_this.props.debounceDelay, function (value) {
      // TODO add the promise cancellation for avoiding having disordered requests
      _this.props.search(value).then(function (searchResult) {
        _this.setState({
          searchResult: searchResult,
          emptyOption: 'Ingen resultater',
          loading: false
        });
      });
    });
    return _this;
  }

  (0, _createClass3.default)(AsyncSearch, [{
    key: 'render',
    value: function render() {
      var selectedOption = this.props.selectedOption.map(function (_ref2) {
        var uuid = _ref2.uuid,
            fullName = _ref2.fullName;

        return {
          id: uuid,
          value: uuid,
          label: fullName
        };
      });

      return _react2.default.createElement(
        _Select2.default,
        {
          editable: true,
          'data-automation': 'sdk-item-bank-share-input',
          onInputChange: this.handleSearchInputChange,
          value: this.state.searchInput,
          emptyOption: this.state.emptyOption,
          loadingText: this.state.loading ? 'Valgmuligheder indl\xE6ses' : null,
          onClose: this.handleClose,
          selectedOption: selectedOption,
          onChange: this.handleSearchSelectionChange,
          filter: this.props.selectionFilter,
          formatSelectedOption: this.formatSelectedOption,
          placeholder: 'Indtast navn eller login-ID ...',
          label: 'Del med',
          multiple: true
        },
        this.state.searchResult.map(function (person) {
          return _react2.default.createElement(
            'option',
            {
              'data-automation': 'sdk-item-bank-acoption-user-' + person.uuid,
              value: person.uuid,
              key: person.uuid
            },
            person.fullName
          );
        })
      );
    }
  }]);
  AsyncSearch.displayName = 'AsyncSearch'
  ;
  return AsyncSearch;
}(_react.Component), _class.propTypes = {
  search: _propTypes2.default.func.isRequired,
  onSelectionChange: _propTypes2.default.func.isRequired,
  selectedOption: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    avatar: _propTypes2.default.string,
    fullName: _propTypes2.default.string.isRequired,
    uuid: _propTypes2.default.string.isRequired
  })).isRequired,
  selectionFilter: _propTypes2.default.func,
  debounceDelay: _propTypes2.default.number
}, _class.defaultProps = {
  selectionFilter: function selectionFilter(value) {
    return value;
  },
  debounceDelay: 500
}, _temp);
exports.default = AsyncSearch;