"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 _getPrototypeOf3 = _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 _identity = _interopRequireDefault(require("lodash/identity"));

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

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

var tagShape = _propTypes.default.shape({
  id: _propTypes.default.string,
  value: _propTypes.default.string.isRequired
});

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

  function TagSelect() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, TagSelect);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(TagSelect)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      text: ''
    };
    _this.encodeTag = JSON.stringify;
    _this.decodeTag = JSON.parse;

    _this.tagToOption = function (tag) {
      return {
        value: _this.encodeTag(tag),
        label: tag.value
      };
    };

    _this.handleChange = function (event, options) {
      var onChange = _this.props.onChange;
      var tags = options.map(function (option) {
        return _this.decodeTag(option.value);
      });
      onChange(tags);
    };

    _this.handleInputChange = function (e, value) {
      var text = value.trim();

      _this.props.onInputChange(text === '' ? null : text);

      _this.setState({
        text: text
      });
    };

    return _this;
  }

  (0, _createClass2.default)(TagSelect, [{
    key: "selectedOptions",
    value: function selectedOptions() {
      var tags = this.props.tags;
      return tags.map(this.tagToOption);
    }
  }, {
    key: "emptyText",
    value: function emptyText() {
      var _this$props = this.props,
          tags = _this$props.tags,
          noMatchText = _this$props.noMatchText;
      var text = this.state.text;

      var exists = function exists() {
        return "\xC9tiquette d\xE9j\xE0 s\xE9lectionn\xE9e\xA0: " + text;
      };

      return tags.some(function (tag) {
        return tag.value === text;
      }) ? exists() : noMatchText;
    }
  }, {
    key: "options",
    value: function options() {
      var _this2 = this;

      var _this$props2 = this.props,
          allowNewTags = _this$props2.allowNewTags,
          tags = _this$props2.tags,
          tagSuggestions = _this$props2.tagSuggestions;
      var options = tagSuggestions.map(function (tag) {
        return _react.default.createElement("option", {
          key: tag.id,
          value: _this2.encodeTag(tag)
        }, tag.value);
      });
      var text = this.state.text; // Don't offer tag creation on suggested or selected tags

      if (!tagSuggestions.concat(tags).some(function (tag) {
        return tag.value === text;
      })) {
        if (allowNewTags && text.length > 0) {
          options.push(_react.default.createElement("option", {
            key: text,
            value: this.encodeTag({
              value: text
            })
          }, "Cr\xE9er une nouvelle \xE9tiquette\xA0: " + text));
        }
      }

      return options;
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_Select.default, {
        label: "Balises et m\xE9ta donn\xE9es",
        onChange: this.handleChange,
        emptyOption: this.emptyText(),
        onInputChange: this.handleInputChange,
        selectedOption: this.selectedOptions(),
        filter: _identity.default,
        "data-automation": "sdk-tags-and-metadata",
        multiple: true,
        editable: true
      }, this.options());
    }
  }]);
  TagSelect.displayName = "TagSelect";
  return TagSelect;
}(_react.Component);

exports.default = TagSelect;
TagSelect.propTypes = {
  allowNewTags: _propTypes.default.bool,
  noMatchText: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func.isRequired,
  onInputChange: _propTypes.default.func.isRequired,
  tagSuggestions: _propTypes.default.arrayOf(tagShape),
  tags: _propTypes.default.arrayOf(tagShape)
};
TagSelect.defaultProps = {
  allowNewTags: true,
  tags: [],
  tagSuggestions: [] // unfortunately controlled component text isn't currently part of the Select
  // inst-ui component, even though controlled options are

};