import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import PropTypes from 'prop-types';
import { Pagination as Pagination$1 } from '@carbon/react';
import classnames from 'classnames';
import { settings } from '../../constants/Settings.js';
import useSizeObserver from '../../hooks/useSizeObserver.js';

var _excluded = ["isItemPerPageHidden", "className", "preventInteraction", "disabled", "testId", "size", "maxPagesConditionalStyle"];
var iotPrefix = 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(_ref, _excluded);
  var _useSizeObserver = useSizeObserver({
      initialWidth: 500
    }),
    _useSizeObserver2 = _slicedToArray(_useSizeObserver, 2),
    width = _useSizeObserver2[0].width,
    paginationRef = _useSizeObserver2[1];
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Pagination$1, _extends({}, rest, {
    forwardedRef: paginationRef,
    size: size,
    "data-testid": testId,
    disabled: preventInteraction || disabled,
    className: classnames(className, "".concat(iotPrefix, "--pagination"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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.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.bool,
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  testId: PropTypes.string,
  maxPagesConditionalStyle: PropTypes.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;

export { Pagination as default };
