"use strict";

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

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

var _reactMentions = require("react-mentions");

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

var _Icon = require("../Icon");

var _jsxRuntime = require("react/jsx-runtime");

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

var mentionsStyle = {
  control: {
    fontSize: 14
  },
  "&multiLine": {
    control: {
      minHeight: 80
    },
    highlighter: {
      padding: 9,
      paddingTop: 11
    },
    input: {
      padding: 9,
      borderRadius: "0.375rem",
      borderColor: "rgb(229 231 235)"
    }
  },
  suggestions: {
    list: {
      backgroundColor: "white",
      border: "1px solid rgba(0,0,0,0.15)",
      fontSize: 14
    },
    item: {
      padding: 5,
      borderBottom: "1px solid rgba(0,0,0,0.15)",
      "&focused": {
        backgroundColor: "#cee4e5"
      }
    }
  }
};

var Suggestion = function Suggestion(_ref) {
  var display = _ref.display,
      icon = _ref.icon;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "flex items-center",
    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
      name: icon,
      size: "xl"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      className: "pl-2",
      children: display
    })]
  });
};

var CommentInput = function CommentInput(_ref2) {
  var data = _ref2.data,
      value = _ref2.value,
      _onChange = _ref2.onChange,
      markup = _ref2.markup,
      trigger = _ref2.trigger;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMentions.MentionsInput, {
    value: value,
    onChange: function onChange(e) {
      return _onChange(e.target.value);
    },
    a11ySuggestionsListLabel: "Suggested mentions",
    style: mentionsStyle,
    allowSpaceInQuery: true,
    allowSuggestionsAboveCursor: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMentions.Mention, {
      markup: markup,
      trigger: trigger,
      data: data,
      renderSuggestion: Suggestion,
      className: "bg-blue-200 rounded"
    })
  });
};

exports.CommentInput = CommentInput;
CommentInput.propTypes = {
  data: _propTypes.default.arrayOf(_propTypes.default.shape({
    display: _propTypes.default.string,
    icon: _propTypes.default.string
  })).isRequired,
  value: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func.isRequired,
  trigger: _propTypes.default.string,
  markup: _propTypes.default.string
};
CommentInput.defaultProps = {
  trigger: "@",
  markup: "@[__display__](user:__id__)"
};