"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 _react2 = require("format-message/react");

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-common/lib/format-message"));

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

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

var _dec,
    _class,
    _class2,
    _temp,
    _medium_mi_date = Intl.DateTimeFormat("mi", { month: "short", day: "numeric", year: "numeric" }).format,
    _default_mi_number = Intl.NumberFormat("mi", { style: "decimal" }).format;

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

  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 confirmBody = _react.default.createElement(_Alert.default, {
          variant: "error",
          padding: "0"
        }, _react.default.createElement("div", {
          className: styles.deleteAlert
        }, _react.default.createElement("div", {
          className: styles.deletePreface
        }, "I te w\u0101 o te mukunga, ng\u0101 t\u016Bemi mai i t\u0113nei p\u0113k\u0113:"), _react.default.createElement(_List.default, null, _react.default.createElement(_List.ListItem, null, "ka kore e taea e \u0113tahi atu te uru e whai w\u0101hi ana ki te whakauru"), _react.default.createElement(_List.ListItem, null, (0, _react2.formatChildren)("ka <0>KAORE</0> ka tangohia mai i ng\u0101 aromatawai", [_react.default.createElement(_Text.default, {
          weight: "bold",
          key: "0"
        })])), _react.default.createElement(_List.ListItem, null, "ka ngaro o r\u0101tou hononga t\u0101tai i roto i te ripoata (mehemea he w\u0101hanga ta r\u0101tou i te aromatawai"), _react.default.createElement(_List.ListItem, null, "ka kore e w\u0101tea ki \u0113tahi aromatawai e ngana ana i te matap\u014Dkere / tuhinga te kume i ng\u0101 t\u016Bemi  (tango i te kume ka oti te take)"))));

        _this.props.withConfirm((0, _partial.default)(_this.deleteBank, bankId), {
          text: confirmBody,
          title: "Mukua P\u0113k\u0113",
          continueText: "Muku",
          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, "Ng\u0101 Mahi P\u0113k\u0113 atu mo " + 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
      }), "Whakatika"), _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
      }), "Muku")));
    };

    _this.renderBank = function (bank) {
      return _react.default.createElement("div", {
        key: bank.id,
        className: styles.bankRow
      }, _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 _s, _n, _s2, _n2;

      var numStimuli = bank.entryCount - bank.itemEntryCount;
      return _react.default.createElement("div", {
        className: styles.bankDetails
      }, _react.default.createElement("div", null, "Whakah\u014Du " + _medium_mi_date(bank.updatedAt()), _react.default.createElement(_PresentationContent.default, null, " | "), _default_mi_number(bank.itemEntryCount) + " Ng\u0101 P\u0101tai Katoa", _react.default.createElement(_PresentationContent.default, null, " | "), 0 + " E p\u0101 ana ki a ia              " + (_default_mi_number(numStimuli) + " Whakaongaonga"), _react.default.createElement(_IfFeature.default, {
        name: "item_bank_sharing"
      }, _react.default.createElement(_PresentationContent.default, null, " | ")), _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("E tuari ana", " (").concat(bank.sharedCount, ")") : "+ Tuari"))));
    }
  }, {
    key: "renderSharingModal",
    value: function renderSharingModal() {
      return _react.default.createElement(_SharingModal.default, {
        appContainer: this.props.appContainer,
        isOpen: this.state.sharingModalOpen,
        bank: this.state.sharingModalBank,
        modalTrigger: this.sharingButtons[this.state.sharingModalBank.id],
        onDismiss: this.handleSharingModalDismiss,
        search: this.props.getShareableUsers,
        getUserInfo: this.props.getUserInfo
      });
    }
  }, {
    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;
}(_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,
  navigateToBank: _propTypes.default.func.isRequired,
  openModal: _propTypes.default.func.isRequired,
  withConfirm: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  getUserInfo: null,
  getShareableUsers: null
}, _temp)) || _class);
exports.default = BanksList;