"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ITEMS_PER_PAGE_OPTIONS = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _InputNumber = _interopRequireDefault(require("../InputNumber"));

var _Translate = _interopRequireDefault(require("../Translate"));

var _Link = _interopRequireDefault(require("../Link"));

var _Text = _interopRequireDefault(require("../Text"));

var _Popover = _interopRequireDefault(require("../Popover"));

var _SegmentedControl = _interopRequireDefault(require("../SegmentedControl"));

var _ContentLoader = _interopRequireDefault(require("../ContentLoader"));

var _utils = require("../utils");

// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
const ITEMS_PER_PAGE_OPTIONS = [25, 100, 'all'];
exports.ITEMS_PER_PAGE_OPTIONS = ITEMS_PER_PAGE_OPTIONS;
const VIEW_DEFAULT = 'default';
const VIEW_POPOVER = 'popover';

/**
 * `Pagination` component is used for navigating objects in [List](#!/List) which content is displayed on multiple pages.
 * @since 0.0.54
 */
const Pagination = ({
  baseClassName = `${_constants.CLS_PREFIX}pagination`,
  className,
  current = 1,
  total,
  onSelect,
  itemsPerPage,
  itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
  onItemsPerPageChange,
  isShowNavigationButtons,
  isShowPageButtons,
  maxPageButtons,
  view = VIEW_DEFAULT,
  loading = false,
  ...props
}) => {
  const handleSelect = page => (0, _utils.safeInvoke)(onSelect, page);

  const handleItemsPerPageChange = option => (0, _utils.safeInvoke)(onItemsPerPageChange, option);

  const pagination = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, className)
  }, props), /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__pages`
  }, /*#__PURE__*/_react.default.createElement(_ContentLoader.default, {
    loading: loading,
    overlay: true,
    spinner: {
      size: 'sm'
    },
    className: `${baseClassName}__loader`
  }, /*#__PURE__*/_react.default.createElement(_InputNumber.default, {
    value: loading ? undefined : current,
    onChange: handleSelect,
    min: 1,
    max: total,
    decrementIcon: "arrow-left",
    incrementIcon: "arrow-right",
    className: `${baseClassName}__input`
  })), /*#__PURE__*/_react.default.createElement(_Translate.default, {
    content: "Pagination.totalShort",
    fallback: "of %%total%%",
    params: {
      total
    },
    className: `${baseClassName}__text`
  })), onItemsPerPageChange ? /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__options`
  }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
    content: "Pagination.itemsPerPage",
    fallback: "Items per page",
    className: `${baseClassName}__text`
  }), /*#__PURE__*/_react.default.createElement(_SegmentedControl.default, {
    ghost: true,
    buttons: itemsPerPageOptions.map(value => {
      let title = value;

      if (value === 'all') {
        title = /*#__PURE__*/_react.default.createElement(_Translate.default, {
          content: "Pagination.all",
          fallback: "All"
        });
      }

      return {
        value,
        title
      };
    }),
    selected: itemsPerPage,
    onChange: handleItemsPerPageChange,
    className: `${baseClassName}__control`
  })) : null);

  if (view === VIEW_POPOVER) {
    return /*#__PURE__*/_react.default.createElement(_Popover.default, {
      target: /*#__PURE__*/_react.default.createElement(_Text.default, {
        fontSize: "sm",
        component: _Link.default,
        nowrap: true
      }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
        content: "Pagination.total",
        fallback: "Page %%current%% of %%total%%",
        params: {
          current,
          total
        }
      })),
      placement: "top",
      className: `${baseClassName}__popover`
    }, pagination);
  }

  return pagination;
};

var _default = Pagination;
exports.default = _default;