'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var classnames = require('classnames');
var Settings = require('../../constants/Settings.js');
var useSizeObserver = require('../../hooks/useSizeObserver.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var _excluded = ["isItemPerPageHidden", "className", "preventInteraction", "disabled", "testId", "size", "maxPagesConditionalStyle"];
var iotPrefix = Settings.settings.iotPrefix;

/**
 * This pagination component hides the items per page selection dropdown if the isItemsPerPageHidden bit is true.
 * It also hides the Items per page and x of x items text if the total width of the pagination bar is less than 500 px.
 * In addition, it narrows padding between 608px and 500px due to overflow issue.
 */
var SizedPagination = function SizedPagination(_ref) {
  var isItemPerPageHidden = _ref.isItemPerPageHidden,
    className = _ref.className,
    preventInteraction = _ref.preventInteraction,
    disabled = _ref.disabled,
    testId = _ref.testId,
    size = _ref.size,
    maxPagesConditionalStyle = _ref.maxPagesConditionalStyle,
    rest = _objectWithoutProperties__default.default(_ref, _excluded);
  var _useSizeObserver = useSizeObserver({
      initialWidth: 500
    }),
    _useSizeObserver2 = _slicedToArray__default.default(_useSizeObserver, 2),
    width = _useSizeObserver2[0].width,
    paginationRef = _useSizeObserver2[1];
  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(react.Pagination, _extends__default.default({}, rest, {
    forwardedRef: paginationRef,
    size: size,
    "data-testid": testId,
    disabled: preventInteraction || disabled,
    className: classnames__default.default(className, "".concat(iotPrefix, "--pagination"), _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--pagination--hide-page"), isItemPerPageHidden), "".concat(iotPrefix, "--pagination--hide-select"), preventInteraction), "".concat(iotPrefix, "--pagination--narrow"), width > 500 && width < 608), "".concat(iotPrefix, "--pagination--compact"), width < 500), "".concat(iotPrefix, "--pagination--hide-goto-page"), maxPagesConditionalStyle)),
    style: {
      '--pagination-text-display': width < 500 ? 'none' : 'flex'
    }
  })));
};
SizedPagination.propTypes = {
  isItemPerPageHidden: PropTypes__default.default.bool,
  // It is currently not possible to completely disable the carbon pagination
  // therefor we use this prop to combine disable and hiding of controls.
  preventInteraction: PropTypes__default.default.bool,
  disabled: PropTypes__default.default.bool,
  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
  testId: PropTypes__default.default.string,
  maxPagesConditionalStyle: PropTypes__default.default.bool
};
SizedPagination.defaultProps = {
  isItemPerPageHidden: false,
  preventInteraction: false,
  disabled: false,
  testId: 'sized-pagination',
  size: 'lg',
  maxPagesConditionalStyle: false
};
SizedPagination.__docgenInfo = {
  "description": "This pagination component hides the items per page selection dropdown if the isItemsPerPageHidden bit is true.\nIt also hides the Items per page and x of x items text if the total width of the pagination bar is less than 500 px.\nIn addition, it narrows padding between 608px and 500px due to overflow issue.",
  "methods": [],
  "displayName": "SizedPagination",
  "props": {
    "isItemPerPageHidden": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "preventInteraction": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'sized-pagination'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "size": {
      "defaultValue": {
        "value": "'lg'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'sm'",
          "computed": false
        }, {
          "value": "'md'",
          "computed": false
        }, {
          "value": "'lg'",
          "computed": false
        }]
      },
      "required": false
    },
    "maxPagesConditionalStyle": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
var Pagination = SizedPagination;

module.exports = Pagination;
