"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 _IconTrash = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconTrash"));

var _IconReset = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconReset"));

var _Button = _interopRequireDefault(require("@instructure/ui-buttons/lib/components/Button"));

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

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

var _Grid = _interopRequireWildcard(require("@instructure/ui-layout/lib/components/Grid"));

var _View = _interopRequireDefault(require("@instructure/ui-layout/lib/components/View"));

var _Avatar = _interopRequireDefault(require("@instructure/ui-elements/lib/components/Avatar"));

var _Text = _interopRequireDefault(require("@instructure/ui-elements/lib/components/Text"));

var _constants = require("@instructure/quiz-common/lib/constants");

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

var styles = {
  componentId: 'eeOol',
  template: function template(theme) {
    return "\n\n.eeOol_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}\n\n.eeOol_bqPU{text-decoration:line-through}");
  },
  'separator': 'eeOol_fatK',
  'labelRemoved': 'eeOol_bqPU'
};

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

  function PeopleList() {
    var _getPrototypeOf2;

    var _this;

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

    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)(PeopleList)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.removeButton = function (person, isPersonRemoved) {
      return _react.default.createElement(_Button.default, {
        "data-automation": "sdk-unshare-bank-user-".concat(person.get('userUuid')),
        variant: "icon",
        onClick: function onClick() {
          return _this.props.onPersonRemove(person.get('id'), isPersonRemoved);
        },
        icon: isPersonRemoved ? _IconReset.default : _IconTrash.default
      }, _react.default.createElement(_ScreenReaderContent.default, null, isPersonRemoved ? "\u0627\u0644\u062A\u0631\u0627\u062C\u0639 \u0639\u0646 \u0625\u0632\u0627\u0644\u0629 " + person.get('fullName') : "\u0625\u0632\u0627\u0644\u0629 " + person.get('fullName')));
    };

    _this.renderPerson = function (person, index) {
      var isPersonRemoved = _this.props.peopleToRemove.includes(person.get('id'));

      return _react.default.createElement(_Grid.GridRow, {
        key: person.get('userUuid'),
        "data-automation": "sdk-shared-with-user-row"
      }, _react.default.createElement(_Grid.GridCol, {
        width: 1
      }, _react.default.createElement(_Avatar.default, {
        name: person.get('fullName'),
        src: person.get('avatar'),
        size: "small"
      })), _react.default.createElement(_Grid.GridCol, null, _react.default.createElement("span", {
        className: isPersonRemoved && styles.labelRemoved,
        "data-automation": isPersonRemoved && "sdk-shared-user-removed"
      }, person.get('fullName'))), false && _react.default.createElement(_Grid.GridCol, {
        width: "auto"
      }, _react.default.createElement(_Select.default, {
        onChange: function onChange(event) {
          return _this.props.onPermissionChange(index, event.target.value);
        },
        value: person.get('permission'),
        label: _react.default.createElement(_ScreenReaderContent.default, null, "\u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u0640 " + person.get('fullName'))
      }, _react.default.createElement("option", {
        value: _constants.CAN_EDIT
      }, "\u064A\u0645\u0643\u0646 \u0627\u0644\u062A\u062D\u0631\u064A\u0631"), _react.default.createElement("option", {
        value: _constants.READ_ONLY
      }, "\u0642\u0631\u0627\u0621\u0629 \u0641\u0642\u0637"))), _react.default.createElement(_Grid.GridCol, {
        width: "auto"
      }, _this.props.people.size === 1 ? null : _this.removeButton(person, isPersonRemoved)));
    };

    return _this;
  }

  (0, _createClass2.default)(PeopleList, [{
    key: "render",
    value: function render() {
      var people = this.props.people;
      this.removeButtonRefs = [];
      return _react.default.createElement("div", null, _react.default.createElement(_Text.default, {
        as: "div",
        weight: "bold"
      }, "\u0645\u0634\u062A\u0631\u0643 \u062D\u0627\u0644\u064A\u064B\u0627 \u0645\u0639"), _react.default.createElement(_View.default, {
        as: "div",
        padding: "small 0 0 0",
        "data-automation": "sdk-shared-bank-user-list"
      }, _react.default.createElement(_Grid.default, {
        vAlign: "middle"
      }, people.map(this.renderPerson))));
    }
  }]);
  PeopleList.displayName = "PeopleList";
  return PeopleList;
}(_react.Component);

exports.default = PeopleList;
PeopleList.propTypes = {
  people: _propTypes.default.arrayOf(_propTypes.default.shape({
    avatar: _propTypes.default.string,
    fullName: _propTypes.default.string.isRequired,
    userUuid: _propTypes.default.string.isRequired,
    permission: _propTypes.default.string.isRequired
  })).isRequired,
  onPermissionChange: _propTypes.default.func.isRequired,
  onPersonRemove: _propTypes.default.func.isRequired,
  peopleToRemove: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
};