"use strict";

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

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

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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _partial = _interopRequireDefault(require("lodash/partial"));

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

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

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

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

var _Menu = _interopRequireDefault(require("@instructure/ui-menu/lib/components/Menu"));

var _MenuItem = _interopRequireDefault(require("@instructure/ui-menu/lib/components/Menu/MenuItem"));

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

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

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

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

var _IconMore = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconMore"));

var _Alert = _interopRequireDefault(require("@instructure/ui-alerts/lib/components/Alert"));

var _List = _interopRequireWildcard(require("@instructure/ui-elements/lib/components/List"));

var _lib = _interopRequireDefault(require("@instructure/ui-themeable/lib"));

var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes"));

var _IfFeature = _interopRequireDefault(require("../../../common/components/shared/IfFeature"));

var _EditBankModal = _interopRequireDefault(require("../EditBankModal"));

var _SharingModal = _interopRequireDefault(require("../SharingModal"));

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

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

var _withI18nSupport2 = _interopRequireDefault(require("@instructure/quiz-common/lib/with-i18n-support"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec,
    _class,
    _class2,
    _temp,
    _default_enGB_number = Intl.NumberFormat("en-GB", { style: "decimal" }).format;

var styles = {
  componentId: 'eShTv',
  template: function template(theme) {
    return "\n\n.eShTv_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.eShTv_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.eShTv_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.eShTv_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.eShTv_cCNg{margin:").concat(theme.bankOptionsMargin || 'inherit', " 0}\n\n.eShTv_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.eShTv_AHIw{display:block}\n\n.eShTv_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}");
  },
  'bankRow': 'eShTv_dIMK',
  'bankInfo': 'eShTv_Zupb',
  'bankTitle': 'eShTv_qnWp',
  'bankDetails': 'eShTv_ciks',
  'bankOptions': 'eShTv_cCNg',
  'bankOptionIcon': 'eShTv_bISW',
  'deleteAlert': 'eShTv_AHIw',
  'deletePreface': 'eShTv_eTBd'
};
var BanksList = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_withI18nSupport) {
  (0, _inherits2.default)(BanksList, _withI18nSupport);

  function BanksList() {
    var _getPrototypeOf2;

    var _this;

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

    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)(BanksList)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      sharingModalOpen: false,
      sharingModalBank: null
    };
    _this.sharingButtons = [];

    _this.openModal = function (bank) {
      return function () {
        _this.props.openModal([_constants.EDIT_BANK_MODAL, bank.id].join(':'), {
          modalTrigger: _this.bankActionsButton
        });
      };
    };

    _this.bankActionsButtonRef = function (node) {
      _this.bankActionsButton = node;
    };

    _this.deleteBank = function (bankId) {
      _this.props.deleteBank(bankId);

      setTimeout(_this.props.focusCreateBankButton, 100);
    };

    _this.openDeleteBankModal = function (bankId) {
      return function () {
        var _params, _s;

        var confirmBody = _react.default.createElement(_Alert.default, {
          variant: "error",
          padding: "0"
        }, _react.default.createElement("div", {
          className: styles.deleteAlert
        }, _react.default.createElement("div", {
          className: styles.deletePreface
        }, "Once deleted, items from this bank:"), _react.default.createElement(_List.default, null, _react.default.createElement(_List.ListItem, null, "will no longer be accessible to others who currently have shared access"), _react.default.createElement(_List.ListItem, null, (_params = [function (_ref) {
          var children = _ref.children;
          return _react.default.createElement(_Text.default, {
            weight: "bold",
            key: "0"
          }, children);
        }], ["will ", (_s = _params["0"], typeof _s === "function" ? _s({
          children: ["NOT"]
        }) : _s), " be removed from any assessments"])), _react.default.createElement(_List.ListItem, null, "will lose their statistical link in reporting (if they were part of an assessment)"), _react.default.createElement(_List.ListItem, null, "will no longer be available to any assessments attempting a random/batch pull of items (removing the pull will resolve the issue)"))));

        _this.props.withConfirm((0, _partial.default)(_this.deleteBank, bankId), {
          text: confirmBody,
          title: "Delete bank",
          continueText: "Delete",
          continueVariant: 'danger',
          size: 'medium'
        });
      };
    };

    _this.openSharingModal = function (bank) {
      return function () {
        _this.setState({
          sharingModalOpen: true,
          sharingModalBank: bank
        });
      };
    };

    _this.handleSharingModalDismiss = function () {
      _this.setState({
        sharingModalOpen: false,
        sharingModalBank: null
      });
    };

    _this.handleSharingButtonRef = function (bankId) {
      return function (node) {
        _this.sharingButtons[bankId] = node;
      };
    };

    _this.renderBankInfo = function (bank) {
      var navigateToBank = function navigateToBank(bankId) {
        return function () {
          return _this.props.navigateToBank(bankId);
        };
      };

      return _react.default.createElement("div", {
        className: styles.bankInfo,
        "data-automation": "sdk-bank-info",
        tabIndex: "-1"
      }, _react.default.createElement("div", {
        className: styles.bankTitle
      }, _react.default.createElement(_Link.default, {
        onClick: navigateToBank(bank.id),
        theme: {
          color: _this.theme.bankTitleLinkColor,
          hoverColor: _this.theme.bankTitleLinkHoverColor
        },
        "data-automation": "sdk-banks-list-bank-title-link"
      }, _react.default.createElement(_Heading.default, {
        as: "h2",
        level: "reset",
        "data-automation": "sdk-banks-list-bank-title-heading"
      }, bank.title))), _this.renderDetails(bank));
    };

    _this.renderBankOptions = function (bank) {
      return _react.default.createElement("div", {
        className: styles.bankOptions
      }, _react.default.createElement(_Menu.default, {
        trigger: _react.default.createElement(_Button.default, {
          variant: "icon",
          ref: _this.bankActionsButtonRef,
          "data-automation": "sdk-more-bank-actions-button",
          icon: _IconMore.default
        }, _react.default.createElement(_ScreenReaderContent.default, null, "More Bank Actions for " + bank.title))
      }, _react.default.createElement(_MenuItem.default, {
        onSelect: _this.openModal(bank),
        "data-automation": "sdk-edit-bank-menu-item"
      }, _react.default.createElement(_IconEdit.default, {
        className: styles.bankOptionIcon
      }), "Edit"), _react.default.createElement(_MenuItem.default, {
        onSelect: _this.openDeleteBankModal(bank.id),
        "data-automation": "sdk-delete-bank-menu-item"
      }, _react.default.createElement(_IconTrash.default, {
        className: styles.bankOptionIcon
      }), "Delete")));
    };

    _this.renderBank = function (bank) {
      return _react.default.createElement("div", {
        key: bank.id,
        className: styles.bankRow,
        "data-automation": "sdk-banks-list-bank-row"
      }, _react.default.createElement(_EditBankModal.default, {
        workingBank: bank.getWorkingInstance()
      }), _this.renderBankInfo(bank), _this.renderBankOptions(bank));
    };

    return _this;
  }

  (0, _createClass2.default)(BanksList, [{
    key: "renderDetails",
    value: function renderDetails(bank) {
      var _s2, _n, _i, _v, _s3, _n2, _i2, _v2;

      var numStimuli = bank.entryCount - bank.itemEntryCount;
      var separator = ' | ';
      return _react.default.createElement("div", {
        className: styles.bankDetails,
        "data-automation": "sdk-banks-list-bank-details"
      }, _react.default.createElement("div", null, "Updated " + this.formatDateMedium(bank.updatedAt()), _react.default.createElement(_PresentationContent.default, null, separator), (_s2 = bank.itemEntryCount, _n = +_s2, (_i = Math.floor(Math.abs(+_s2)), _v = (_s2 + '.').split('.')[1].length, _i === 1 && _v === 0 ? _default_enGB_number(bank.itemEntryCount) + " Question Total" : _default_enGB_number(bank.itemEntryCount) + " Questions Total")), _react.default.createElement(_PresentationContent.default, null, separator), 0 + " Associated Across\n              " + (_s3 = numStimuli, _n2 = +_s3, (_i2 = Math.floor(Math.abs(+_s3)), _v2 = (_s3 + '.').split('.')[1].length, _i2 === 1 && _v2 === 0 ? _default_enGB_number(numStimuli) + " Stimulus" : _default_enGB_number(numStimuli) + " Stimuli")), _react.default.createElement(_IfFeature.default, {
        name: "item_bank_sharing"
      }, _react.default.createElement(_PresentationContent.default, null, separator)), _react.default.createElement(_IfFeature.default, {
        name: "item_bank_sharing"
      }, _react.default.createElement(_Link.default, {
        "data-automation": "sdk-shared-bank-share-link",
        as: "button",
        onClick: this.openSharingModal(bank),
        ref: this.handleSharingButtonRef(bank.id)
      }, bank.sharedCount > 0 ? "".concat("Sharing", " (").concat(bank.sharedCount, ")") : "+ Share"))));
    }
  }, {
    key: "renderSharingModal",
    value: function renderSharingModal() {
      return _react.default.createElement(_SharingModal.default, {
        appContainer: this.props.appContainer,
        bank: this.state.sharingModalBank,
        getUserInfo: this.props.getUserInfo,
        isOpen: this.state.sharingModalOpen,
        minChars: this.props.minChars,
        modalTrigger: this.sharingButtons[this.state.sharingModalBank.id],
        onDismiss: this.handleSharingModalDismiss,
        onShare: this.props.onShare,
        search: this.props.getShareableUsers
      });
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.banks.toArray().map(this.renderBank));
    }
  }]);
  BanksList.displayName = "BanksList";
  return BanksList;
}((0, _withI18nSupport2.default)(_react.Component)), _class2.propTypes = {
  appContainer: _CustomPropTypes.default.selectors.isRequired,
  banks: _reactImmutableProptypes.default.list.isRequired,
  focusCreateBankButton: _propTypes.default.func.isRequired,
  deleteBank: _propTypes.default.func.isRequired,
  getUserInfo: _propTypes.default.func,
  getShareableUsers: _propTypes.default.func,
  minChars: _propTypes.default.number,
  navigateToBank: _propTypes.default.func.isRequired,
  onShare: _propTypes.default.func,
  openModal: _propTypes.default.func.isRequired,
  withConfirm: _propTypes.default.func.isRequired,
  locale: _propTypes.default.string,
  timezone: _propTypes.default.string
}, _class2.defaultProps = {
  getUserInfo: null,
  getShareableUsers: null,
  minChars: void 0,
  locale: null,
  timezone: null,
  onShare: function onShare() {}
}, _class2.contextTypes = {
  locale: _propTypes.default.string,
  timezone: _propTypes.default.string
}, _temp)) || _class);
exports.default = BanksList;