"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = 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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

var _Loading = _interopRequireDefault(require("./Loading"));

var _formatMessage = _interopRequireDefault(require("../../format-message"));

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

var _aphrodite = require("aphrodite");

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
var LoadMore =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(LoadMore, _Component);

  function LoadMore(props) {
    var _this;

    (0, _classCallCheck2.default)(this, LoadMore);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(LoadMore).call(this, props));

    _this.loadMore = function (ev) {
      _this.setState({
        nextFocus: _this.focusableElements().length
      });

      _this.props.loadMore(ev);
    };

    _this.state = {
      nextFocus: Infinity
    };
    return _this;
  }

  (0, _createClass2.default)(LoadMore, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var focusable = this.focusableElements();

      if (focusable.length > this.state.nextFocus) {
        var next = focusable[this.state.nextFocus];

        if (next) {
          next.focus();
        }
      }
    }
  }, {
    key: "focusableElements",
    value: function focusableElements() {
      if (!this.props.focusSelector) {
        return [];
      }

      return this.refs.parent.querySelectorAll(this.props.focusSelector);
    }
  }, {
    key: "render",
    value: function render() {
      var hasChildren = _react.default.Children.count(this.props.children) > 0;
      var opacity = this.props.isLoading ? 1 : 0;
      return _react.default.createElement("div", {
        ref: "parent"
      }, this.props.children, this.props.hasMore && !this.props.isLoading && _react.default.createElement("div", {
        className: (0, _aphrodite.css)(styles.button)
      }, _react.default.createElement(_Button.default, {
        variant: "link",
        onClick: this.loadMore,
        fluidWidth: true
      }, "Wczytaj wi\u0119cej wynik\xF3w")), hasChildren && this.props.hasMore && _react.default.createElement("div", {
        "aria-hidden": !this.props.isLoading,
        className: (0, _aphrodite.css)(styles.loader),
        style: {
          opacity: opacity
        }
      }, _react.default.createElement(_Loading.default, null)));
    }
  }]);
  LoadMore.displayName = "LoadMore";
  return LoadMore;
}(_react.Component);

LoadMore.propTypes = {
  hasMore: _propTypes.default.bool.isRequired,
  loadMore: _propTypes.default.func.isRequired,
  isLoading: _propTypes.default.bool,
  focusSelector: _propTypes.default.string,
  children: _propTypes.default.any
  /* Immutable.List is not a valid 'node' */

};

var styles = _aphrodite.StyleSheet.create({
  loader: {
    display: "block",
    margin: "20px 0 40px 0",
    clear: "both",
    paddingRight: "30px"
    /* needed for centering */
    ,
    textAlign: "center",
    fontSize: "13px",
    height: "15px",
    color: "#666"
  },
  button: {
    textAlign: "center",
    marginTop: "1em",
    clear: "both"
  }
});

exports.styles = styles;
var _default = LoadMore;
exports.default = _default;