'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

require('../../styles/components/pagination-control.css');

var _isNil = require('lodash/isNil');

var _isNil2 = _interopRequireDefault(_isNil);

var _isNumber = require('lodash/isNumber');

var _isNumber2 = _interopRequireDefault(_isNumber);

var _invariant = require('invariant');

var _invariant2 = _interopRequireDefault(_invariant);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var NAV_VERB_TO_INT_MAP = { prev: -1, next: 1 };
var DISABLED_ATTRIBUTES = { tabIndex: -1, disabled: true };
var ENABLED_ATTRIBUTE = { tabIndex: 0

  /**
   * Pagination Control: controls pagination of results, allowing the user to
   * easily navigate through pages of data.
   */
};
var PaginationControl = function (_React$PureComponent) {
  _inherits(PaginationControl, _React$PureComponent);

  function PaginationControl(props) {
    _classCallCheck(this, PaginationControl);

    var _this = _possibleConstructorReturn(this, (PaginationControl.__proto__ || Object.getPrototypeOf(PaginationControl)).call(this, props));

    (0, _invariant2.default)(props.onPageChange, '`onPageChange` prop missing');
    (0, _invariant2.default)(props.page, '`page` prop missing');
    _this.gotoFirstPage = _this.gotoFirstPage.bind(_this);
    _this.gotoPrevPage = _this.gotoPrevPage.bind(_this);
    _this.gotoNextPage = _this.gotoNextPage.bind(_this);
    _this.gotoLastPage = _this.gotoLastPage.bind(_this);
    _this.isPageWithinLowerBound = _this.isPageWithinLowerBound.bind(_this);
    _this.isPageWithinUpperBound = _this.isPageWithinUpperBound.bind(_this);
    _this.isValidPage = _this.isValidPage.bind(_this);
    _this.isDisabled = _this.isDisabled.bind(_this);
    _this.handleInputKeyDown = _this.handleInputKeyDown.bind(_this);
    _this.handleUserInput = _this.handleUserInput.bind(_this);
    return _this;
  }

  _createClass(PaginationControl, [{
    key: 'gotoFirstPage',
    value: function gotoFirstPage() {
      this.gotoPage(1);
    }
  }, {
    key: 'gotoPrevPage',
    value: function gotoPrevPage() {
      var page = this.props.page;

      this.gotoPage(page - 1);
    }
  }, {
    key: 'gotoNextPage',
    value: function gotoNextPage() {
      var page = this.props.page;

      this.gotoPage(page + 1);
    }
  }, {
    key: 'gotoLastPage',
    value: function gotoLastPage() {
      var totalPages = this.props.totalPages;

      if (!(0, _isNil2.default)(totalPages)) this.gotoPage(totalPages);
    }
  }, {
    key: 'gotoPage',
    value: function gotoPage(page) {
      var payload = { page: page };
      if (!(0, _isNumber2.default)(page)) {
        payload.error = 'Invalid Number';
      } else if (!this.isPageWithinLowerBound(page)) {
        payload.error = 'Number less than lower bound';
      } else if (!this.isPageWithinUpperBound(page)) {
        payload.error = 'Number greater than upper bound';
      }
      this.props.onPageChange(payload);
    }
  }, {
    key: 'isPageWithinLowerBound',
    value: function isPageWithinLowerBound(page) {
      var firstPage = 1;
      return page >= firstPage;
    }
  }, {
    key: 'isPageWithinUpperBound',
    value: function isPageWithinUpperBound(page) {
      var totalPages = this.props.totalPages;

      if ((0, _isNil2.default)(totalPages)) return true;

      return page <= totalPages;
    }
  }, {
    key: 'isValidPage',
    value: function isValidPage(page) {
      return this.isPageWithinLowerBound(page) && this.isPageWithinUpperBound(page);
    }
  }, {
    key: 'isDisabled',
    value: function isDisabled(btnType) {
      var _props = this.props,
          disabled = _props.disabled,
          page = _props.page,
          totalPages = _props.totalPages;


      if (disabled) {
        return DISABLED_ATTRIBUTES;
      }

      if (btnType) {
        if (btnType === 'last' && (0, _isNil2.default)(totalPages)) {
          return DISABLED_ATTRIBUTES;
        }

        var linkedPage = page + (NAV_VERB_TO_INT_MAP[btnType] || 1);
        var invalidPage = !this.isValidPage(linkedPage);
        if (invalidPage) {
          return DISABLED_ATTRIBUTES;
        }
      }

      return ENABLED_ATTRIBUTE;
    }
  }, {
    key: 'handleUserInput',
    value: function handleUserInput(evt) {
      this.gotoPage(parseInt(evt.target.value, 10));
    }
  }, {
    key: 'handleInputKeyDown',
    value: function handleInputKeyDown(evt) {
      var ENTER = 13;
      if (evt.keyCode === ENTER) {
        this.handleUserInput(evt);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          page = _props2.page,
          totalPages = _props2.totalPages;

      var isDisabled = this.isDisabled;

      return _react2.default.createElement(
        'div',
        { className: 'octagon pagination' },
        _react2.default.createElement(
          'button',
          _extends({
            className: 'pagination__button pagination__prev',
            'data-hook': 'pagination-button-first-page',
            title: 'First Page',
            onClick: this.gotoFirstPage
          }, isDisabled('prev')),
          _react2.default.createElement('i', { className: 'arrow_carrot-2left', 'aria-hidden': 'true' })
        ),
        _react2.default.createElement(
          'button',
          _extends({
            className: 'pagination__button pagination__prev',
            'data-hook': 'pagination-button-prev-page',
            title: 'Previous Page',
            onClick: this.gotoPrevPage
          }, isDisabled('prev')),
          _react2.default.createElement('i', { className: 'arrow_carrot-left', 'aria-hidden': 'true' })
        ),
        _react2.default.createElement(
          'div',
          { className: 'pagination__page-number' },
          _react2.default.createElement(
            'label',
            null,
            _react2.default.createElement(
              'span',
              null,
              'Page'
            ),
            _react2.default.createElement('input', _extends({
              className: 'pagination__input',
              type: 'number',
              min: '1',
              max: totalPages,
              key: '' + page,
              defaultValue: '' + page,
              onBlur: this.handleUserInput,
              onKeyDown: this.handleInputKeyDown
            }, isDisabled()))
          ),
          _react2.default.createElement(
            'span',
            null,
            'of'
          ),
          _react2.default.createElement(
            'span',
            { className: 'pagination__page-total' },
            totalPages || _react2.default.createElement(
              'em',
              { className: 'pagination__page-number_total-pages-unknown' },
              '...'
            )
          )
        ),
        _react2.default.createElement(
          'button',
          _extends({
            className: 'pagination__button pagination__next',
            'data-hook': 'pagination-button-next-page',
            title: 'Next Page',
            onClick: this.gotoNextPage
          }, isDisabled('next')),
          _react2.default.createElement('i', { className: 'arrow_carrot-right', 'aria-hidden': 'true' })
        ),
        _react2.default.createElement(
          'button',
          _extends({
            className: 'pagination__button pagination__next',
            'data-hook': 'pagination-button-last-page',
            title: 'Last Page',
            onClick: this.gotoLastPage
          }, isDisabled('last')),
          _react2.default.createElement('i', { className: 'arrow_carrot-2right', 'aria-hidden': 'true' })
        )
      );
    }
  }]);

  return PaginationControl;
}(_react2.default.PureComponent);

exports.default = PaginationControl;


PaginationControl.propTypes = {
  /**
   * Called when the page changes.
   * @param {Number} page target page number
   */
  onPageChange: _propTypes2.default.func.isRequired,
  /**
   * Set pagination to disabled. Default is false.
   */
  disabled: _propTypes2.default.bool,
  /**
   * Set page number.
   */
  page: _propTypes2.default.number,
  /**
   * Set total number of pages.
   */
  totalPages: _propTypes2.default.number
};
//# sourceMappingURL=PaginationControl.js.map