'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, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _identity = require('lodash/identity');

var _identity2 = _interopRequireDefault(_identity);

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

var _Select2 = _interopRequireDefault(_Select);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

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

var TagSelect = (_temp2 = _class = function (_Component) {
  (0, _inherits3.default)(TagSelect, _Component);

  function TagSelect() {
    var _ref;

    var _temp, _this, _ret;

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

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TagSelect.__proto__ || Object.getPrototypeOf(TagSelect)).call.apply(_ref, [this].concat(args))), _this), _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 });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  // unfortunately controlled component text isn't currently part of the Select
  // inst-ui component, even though controlled options are


  (0, _createClass3.default)(TagSelect, [{
    key: 'selectedOptions',
    value: function selectedOptions() {
      var tags = this.props.tags;

      return tags.map(this.tagToOption);
    }
  }, {
    key: 'emptyText',
    value: function emptyText() {
      var _props = this.props,
          tags = _props.tags,
          noMatchText = _props.noMatchText;
      var text = this.state.text;

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

      var _props2 = this.props,
          allowNewTags = _props2.allowNewTags,
          tags = _props2.tags,
          tagSuggestions = _props2.tagSuggestions;

      var options = tagSuggestions.map(function (tag) {
        return _react2.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(_react2.default.createElement(
            'option',
            { key: text, value: this.encodeTag({ value: text }) },
            'Create new tag: ' + text
          ));
        }
      }
      return options;
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _Select2.default,
        {
          label: 'Tags and Metadata',
          onChange: this.handleChange,
          emptyOption: this.emptyText(),
          onInputChange: this.handleInputChange,
          selectedOption: this.selectedOptions(),
          filter: _identity2.default,
          'data-automation': 'sdk-tags-and-metadata',
          multiple: true,
          editable: true },
        this.options()
      );
    }
  }]);
  TagSelect.displayName = 'TagSelect'
  ;
  return TagSelect;
}(_react.Component), _class.propTypes = {
  allowNewTags: _propTypes2.default.bool,
  noMatchText: _propTypes2.default.string.isRequired,
  onChange: _propTypes2.default.func.isRequired,
  onInputChange: _propTypes2.default.func.isRequired,
  tagSuggestions: _propTypes2.default.arrayOf(tagShape),
  tags: _propTypes2.default.arrayOf(tagShape)
}, _class.defaultProps = {
  allowNewTags: true,
  tags: [],
  tagSuggestions: [] }, _temp2);
exports.default = TagSelect;