import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
import React from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import InputNumber from '../InputNumber';
import Translate from '../Translate';
import Link from '../Link';
import Text from '../Text';
import Popover from '../Popover';
import SegmentedControl from '../SegmentedControl';
import ContentLoader from '../ContentLoader';
import { safeInvoke } from '../utils';
export const ITEMS_PER_PAGE_OPTIONS = [25, 100, 'all'];
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 = "".concat(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 => safeInvoke(onSelect, page);

  const handleItemsPerPageChange = option => safeInvoke(onItemsPerPageChange, option);

  const pagination = /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(baseClassName, className)
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "__pages")
  }, /*#__PURE__*/React.createElement(ContentLoader, {
    loading: loading,
    overlay: true,
    spinner: {
      size: 'sm'
    },
    className: "".concat(baseClassName, "__loader")
  }, /*#__PURE__*/React.createElement(InputNumber, {
    value: loading ? undefined : current,
    onChange: handleSelect,
    min: 1,
    max: total,
    decrementIcon: "arrow-left",
    incrementIcon: "arrow-right",
    className: "".concat(baseClassName, "__input")
  })), /*#__PURE__*/React.createElement(Translate, {
    content: "Pagination.totalShort",
    fallback: "of %%total%%",
    params: {
      total
    },
    className: "".concat(baseClassName, "__text")
  })), onItemsPerPageChange ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClassName, "__options")
  }, /*#__PURE__*/React.createElement(Translate, {
    content: "Pagination.itemsPerPage",
    fallback: "Items per page",
    className: "".concat(baseClassName, "__text")
  }), /*#__PURE__*/React.createElement(SegmentedControl, {
    ghost: true,
    buttons: itemsPerPageOptions.map(value => {
      let title = value;

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

      return {
        value,
        title
      };
    }),
    selected: itemsPerPage,
    onChange: handleItemsPerPageChange,
    className: "".concat(baseClassName, "__control")
  })) : null);

  if (view === VIEW_POPOVER) {
    return /*#__PURE__*/React.createElement(Popover, {
      target: /*#__PURE__*/React.createElement(Text, {
        fontSize: "sm",
        component: Link,
        nowrap: true
      }, /*#__PURE__*/React.createElement(Translate, {
        content: "Pagination.total",
        fallback: "Page %%current%% of %%total%%",
        params: {
          current,
          total
        }
      })),
      placement: "top",
      className: "".concat(baseClassName, "__popover")
    }, pagination);
  }

  return pagination;
};

export default Pagination;