"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

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

var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));

var _find = _interopRequireDefault(require("lodash/fp/find"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

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

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

var AsyncSearch =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(AsyncSearch, _Component);

  function AsyncSearch() {
    var _this;

    (0, _classCallCheck2.default)(this, AsyncSearch);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AsyncSearch).apply(this, arguments));
    _this.state = {
      loading: false,
      searchResult: [],
      searchInput: ''
    };

    _this.cleanResults = function () {
      _this.setEmptyOption();

      _this.setState({
        searchResult: []
      });
    };

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

    _this.handleSearchInputChange = function (event, value) {
      var longEnough = value && value.length >= _this.props.minChars;

      _this.setState({
        searchInput: value,
        loading: !!value && longEnough
      });

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

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

    _this.formatSelectedOption = function (option) {
      return _react.default.createElement(_AccessibleContent.default, {
        alt: "Ta bort " + option.label
      }, option.label);
    };

    _this.search = (0, _debounce.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: "Inga resultat",
          loading: false
        });
      });
    });
    return _this;
  }

  (0, _createClass2.default)(AsyncSearch, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setEmptyOption();
    }
  }, {
    key: "setEmptyOption",
    value: function setEmptyOption() {
      var minCharsMessage = "S\xF6kningen m\xE5ste best\xE5 av minst " + this.props.minChars + " tecken";
      this.setState({
        emptyOption: this.props.minChars > 1 ? minCharsMessage : "Skriv f\xF6r att s\xF6ka"
      });
    }
  }, {
    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 _react.default.createElement(_Select.default, {
        "data-automation": "sdk-item-bank-share-input",
        editable: true,
        emptyOption: this.state.emptyOption,
        filter: this.props.selectionFilter,
        label: "Dela med",
        loadingText: this.state.loading ? "Laddar alternativ" : null,
        formatSelectedOption: this.formatSelectedOption,
        multiple: true,
        onChange: this.handleSearchSelectionChange,
        onClose: this.handleClose,
        onInputChange: this.handleSearchInputChange,
        placeholder: "Ange namn eller inloggnings-ID ...",
        selectedOption: selectedOption,
        value: this.state.searchInput
      }, this.state.searchResult.map(function (person) {
        return _react.default.createElement("option", {
          // eslint-disable-next-line react/jsx-no-literals
          "data-automation": "sdk-item-bank-acoption-user-".concat(person.uuid),
          value: person.uuid,
          key: person.uuid
        }, person.fullName);
      }));
    }
  }]);
  AsyncSearch.displayName = "AsyncSearch";
  return AsyncSearch;
}(_react.Component);

exports.default = AsyncSearch;
AsyncSearch.propTypes = {
  debounceDelay: _propTypes.default.number,
  minChars: _propTypes.default.number,
  onSelectionChange: _propTypes.default.func.isRequired,
  search: _propTypes.default.func.isRequired,
  selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
    avatar: _propTypes.default.string,
    fullName: _propTypes.default.string.isRequired,
    uuid: _propTypes.default.string.isRequired
  })).isRequired,
  selectionFilter: _propTypes.default.func
};
AsyncSearch.defaultProps = {
  debounceDelay: 500,
  minChars: 1,
  selectionFilter: function selectionFilter(value) {
    return value;
  }
};