// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

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';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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 = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}pagination`,
    className,
    current = 1,
    total,
    onSelect,
    itemsPerPage,
    itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
    onItemsPerPageChange,
    isShowNavigationButtons,
    isShowPageButtons,
    maxPageButtons,
    view = VIEW_DEFAULT,
    loading = false,
    ...props
  } = _ref;
  const handleSelect = page => safeInvoke(onSelect, page);
  const handleItemsPerPageChange = option => safeInvoke(onItemsPerPageChange, option);
  const pagination = /*#__PURE__*/_jsxs("div", {
    className: classNames(baseClassName, className),
    ...props,
    children: [/*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__pages`,
      children: [/*#__PURE__*/_jsx(ContentLoader, {
        loading: loading,
        overlay: true,
        spinner: {
          size: 'sm'
        },
        className: `${baseClassName}__loader`,
        children: /*#__PURE__*/_jsx(InputNumber, {
          value: loading ? undefined : current,
          onChange: handleSelect,
          min: 1,
          max: total,
          decrementIcon: "arrow-left",
          incrementIcon: "arrow-right",
          className: `${baseClassName}__input`
        })
      }), /*#__PURE__*/_jsx(Translate, {
        content: "Pagination.totalShort",
        fallback: "of %%total%%",
        params: {
          total
        },
        className: `${baseClassName}__text`
      })]
    }), onItemsPerPageChange ? /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__options`,
      children: [/*#__PURE__*/_jsx(Translate, {
        content: "Pagination.itemsPerPage",
        fallback: "Items per page",
        className: `${baseClassName}__text`
      }), /*#__PURE__*/_jsx(SegmentedControl, {
        ghost: true,
        buttons: itemsPerPageOptions.map(value => {
          let title = value;
          if (value === 'all') {
            title = /*#__PURE__*/_jsx(Translate, {
              content: "Pagination.all",
              fallback: "All"
            });
          }
          return {
            value,
            title
          };
        }),
        selected: itemsPerPage,
        onChange: handleItemsPerPageChange,
        className: `${baseClassName}__control`
      })]
    }) : null]
  });
  if (view === VIEW_POPOVER) {
    return /*#__PURE__*/_jsx(Popover, {
      target: /*#__PURE__*/_jsx(Text, {
        fontSize: "sm",
        component: Link,
        nowrap: true,
        children: /*#__PURE__*/_jsx(Translate, {
          content: "Pagination.total",
          fallback: "Page %%current%% of %%total%%",
          params: {
            current,
            total
          }
        })
      }),
      placement: "top",
      className: `${baseClassName}__popover`,
      children: pagination
    });
  }
  return pagination;
};
export default Pagination;