'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 _dec,
    _class,
    _class2,
    _temp2,
    _medium_cy_date = Intl.DateTimeFormat('cy', { month: 'short', day: 'numeric', year: 'numeric' }).format,
    _default_cy_number = Intl.NumberFormat('cy', { style: 'decimal' }).format; /* eslint "react/jsx-no-bind": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _react3 = require('format-message/react');

var _partial = require('lodash/partial');

var _partial2 = _interopRequireDefault(_partial);

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

var _Heading2 = _interopRequireDefault(_Heading);

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

var _Link2 = _interopRequireDefault(_Link);

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

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _Menu2 = _interopRequireDefault(_Menu);

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

var _MenuItem2 = _interopRequireDefault(_MenuItem);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _Text2 = _interopRequireDefault(_Text);

var _IconEditLine = require('instructure-icons/lib/Line/IconEditLine');

var _IconEditLine2 = _interopRequireDefault(_IconEditLine);

var _IconTrashLine = require('instructure-icons/lib/Line/IconTrashLine');

var _IconTrashLine2 = _interopRequireDefault(_IconTrashLine);

var _IconMoreSolid = require('instructure-icons/lib/Solid/IconMoreSolid');

var _IconMoreSolid2 = _interopRequireDefault(_IconMoreSolid);

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

var _Alert2 = _interopRequireDefault(_Alert);

var _List = require('@instructure/ui-core/lib/components/List');

var _List2 = _interopRequireDefault(_List);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

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

var _IfFeature2 = _interopRequireDefault(_IfFeature);

var _EditBankModal = require('../EditBankModal');

var _EditBankModal2 = _interopRequireDefault(_EditBankModal);

var _SharingModal = require('../SharingModal');

var _SharingModal2 = _interopRequireDefault(_SharingModal);

var _formatMessage = require('../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _constants = require('../../../constants');

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n.BanksList__styles__bankRow {\n  display: flex;\n  flex-direction: row;\n  border-bottom: ' + theme.bankRowBorderWidth + ' solid ' + theme.bankRowBorderColor + ';\n}\n\n.BanksList__styles__bankInfo {\n  margin: ' + theme.bankInfoMargin + ' 0;\n  flex: 1;\n}\n\n.BanksList__styles__bankTitle {\n  font-size: ' + theme.bankTitleFontSize + ';\n  padding-bottom: ' + theme.bankTitlePadding + ';\n}\n\n.BanksList__styles__bankDetails {\n  color: ' + theme.bankDetailsColor + ';\n  font-size: ' + theme.bankDetailsFontSize + ';\n}\n\n.BanksList__styles__bankOptions {\n  margin: ' + theme.bankOptionsMargin + ' 0;\n}\n\n.BanksList__styles__bankOptionIcon {\n  vertical-align: middle;\n  margin-right: ' + theme.BankOptionIconMargin + ';\n  font-size: ' + theme.BankOptionIconFontSize + ';\n}\n\n.BanksList__styles__deleteAlert {\n  display: block;\n}\n\n.BanksList__styles__deletePreface {\n  margin-bottom: ' + theme.deletePrefaceMargin + ';\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, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(BanksList, _Component);

  function BanksList() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = BanksList.__proto__ || Object.getPrototypeOf(BanksList)).call.apply(_ref, [this].concat(args))), _this), _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);
      _this.props.focusCreateBankButton();
    }, _this.openDeleteBankModal = function (bankId) {
      return function () {
        var confirmBody = _react2.default.createElement(
          _Alert2.default,
          { variant: 'error', padding: '0' },
          _react2.default.createElement(
            'div',
            { className: styles.deleteAlert },
            _react2.default.createElement(
              'div',
              { className: styles.deletePreface },
              'Ar \xF4l eu dileu, bydd eitemau o\'r banc hwn:'
            ),
            _react2.default.createElement(
              _List2.default,
              null,
              _react2.default.createElement(
                _List.ListItem,
                null,
                'ddim ar gael mwyach i bobl eraill sydd \xE2 mynediad a rennir'
              ),
              _react2.default.createElement(
                _List.ListItem,
                null,
                (0, _react3.formatChildren)('<0>DDIM</0> yn cael ei dynnu o unrhyw asesiad', [_react2.default.createElement(_Text2.default, { weight: 'bold', key: '0' })])
              ),
              _react2.default.createElement(
                _List.ListItem,
                null,
                'yn colli eu dolen ystadegol ar gyfer adrodd (os oeddent yn rhan o asesiad)'
              ),
              _react2.default.createElement(
                _List.ListItem,
                null,
                'ddim ar gael mwyach i unrhyw asesiad sy\'n ceisio tynnu eitemau mewn swp/ar hap (gallwch ddatrys y broblem drwy beidio \xE2 thynnu\'r eitemau)'
              )
            )
          )
        );

        _this.props.withConfirm((0, _partial2.default)(_this.deleteBank, bankId), {
          text: confirmBody,
          title: 'Dileu\'r Banc',
          continueText: 'Dileu',
          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 _react2.default.createElement(
        'div',
        { className: styles.bankInfo, tabIndex: '-1' },
        _react2.default.createElement(
          'div',
          { className: styles.bankTitle },
          _react2.default.createElement(
            _Link2.default,
            {
              onClick: navigateToBank(bank.id),
              theme: {
                color: _this.theme.bankTitleLinkColor,
                hoverColor: _this.theme.bankTitleLinkHoverColor
              },
              'data-automation': 'sdk-banks-list-bank-title-link'
            },
            _react2.default.createElement(
              _Heading2.default,
              {
                as: 'h2',
                level: 'reset',
                'data-automation': 'sdk-banks-list-bank-title-heading'
              },
              bank.title
            )
          )
        ),
        _this.renderDetails(bank)
      );
    }, _this.renderBankOptions = function (bank) {
      return _react2.default.createElement(
        'div',
        { className: styles.bankOptions },
        _react2.default.createElement(
          _Menu2.default,
          {
            trigger: _react2.default.createElement(
              _Button2.default,
              {
                variant: 'icon',
                ref: _this.bankActionsButtonRef,
                'data-automation': 'sdk-more-bank-actions-button',
                icon: _IconMoreSolid2.default
              },
              _react2.default.createElement(
                _ScreenReaderContent2.default,
                null,
                'Rhagor o Weithrediadau Bancio ar gyfer ' + bank.title
              )
            )
          },
          _react2.default.createElement(
            _MenuItem2.default,
            { onSelect: _this.openModal(bank), 'data-automation': 'sdk-edit-bank-menu-item' },
            _react2.default.createElement(_IconEditLine2.default, { className: styles.bankOptionIcon }),
            'Golygu'
          ),
          _react2.default.createElement(
            _MenuItem2.default,
            { onSelect: _this.openDeleteBankModal(bank.id), 'data-automation': 'sdk-delete-bank-menu-item' },
            _react2.default.createElement(_IconTrashLine2.default, { className: styles.bankOptionIcon }),
            'Dileu'
          )
        )
      );
    }, _this.renderBank = function (bank) {
      return _react2.default.createElement(
        'div',
        { key: bank.id, className: styles.bankRow },
        _react2.default.createElement(_EditBankModal2.default, { workingBank: bank.getWorkingInstance() }),
        _this.renderBankInfo(bank),
        _this.renderBankOptions(bank)
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(BanksList, [{
    key: 'renderDetails',
    value: function renderDetails(bank) {
      var _s, _n, _s2, _n2;

      var numStimuli = bank.entryCount - bank.itemEntryCount;
      return _react2.default.createElement(
        'div',
        { className: styles.bankDetails },
        _react2.default.createElement(
          'div',
          null,
          'Wedi diweddaru ' + _medium_cy_date(bank.updatedAt()),
          _react2.default.createElement(
            _PresentationContent2.default,
            null,
            ' | '
          ),
          (_s = bank.itemEntryCount, _n = +_s, (_n === 1 ? _default_cy_number(bank.itemEntryCount) + ' Cyfanswm Cwestiynau' : _default_cy_number(bank.itemEntryCount) + ' Cyfanswm Cwestiynau')),
          _react2.default.createElement(
            _PresentationContent2.default,
            null,
            ' | '
          ),
          0 + ' yn gysylltiedig ar draws\n              ' + (_s2 = numStimuli, _n2 = +_s2, (_n2 === 1 ? _default_cy_number(numStimuli) + ' Ysgogiad' : _default_cy_number(numStimuli) + ' Ysgogiad')),
          _react2.default.createElement(
            _IfFeature2.default,
            { name: 'item_bank_sharing' },
            _react2.default.createElement(
              _PresentationContent2.default,
              null,
              ' | '
            )
          ),
          _react2.default.createElement(
            _IfFeature2.default,
            { name: 'item_bank_sharing' },
            _react2.default.createElement(
              _Link2.default,
              {
                'data-automation': 'sdk-shared-bank-share-link',
                as: 'button',
                onClick: this.openSharingModal(bank),
                ref: this.handleSharingButtonRef(bank.id)
              },
              bank.sharedCount > 0 ? 'Rhannu' + ' (' + bank.sharedCount + ')' : '+ Rhannu'
            )
          )
        )
      );
    }
  }, {
    key: 'renderSharingModal',
    value: function renderSharingModal() {
      return _react2.default.createElement(_SharingModal2.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 _react2.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: _CustomPropTypes2.default.selectors.isRequired,
  banks: _reactImmutableProptypes2.default.list.isRequired,
  focusCreateBankButton: _propTypes2.default.func.isRequired,
  deleteBank: _propTypes2.default.func.isRequired,
  getUserInfo: _propTypes2.default.func,
  getShareableUsers: _propTypes2.default.func,
  navigateToBank: _propTypes2.default.func.isRequired,
  openModal: _propTypes2.default.func.isRequired,
  withConfirm: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  getUserInfo: null,
  getShareableUsers: null
}, _temp2)) || _class);
exports.default = BanksList;