import { ArrowChevronLeftSmall16BoldBlueIcon, ArrowChevronDownSmall16SecondaryIcon, ArrowChevronDownSmall16BlueIcon } from '@cloudtower/icons-react';
import Button from '../Button/index.js';
import Icon from '../Icon/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import { Dropdown, Menu } from 'antd';
import cs from 'classnames';
import React__default, { useRef, useEffect, useMemo } from 'react';

const PaginationStyle = "E_phljevk";
const DropdownOverlayStyle = "E_d12rtyeg";
const Pagination = props => {
  const {
    current,
    count,
    onChange,
    size,
    onSizeChange,
    showTotal = true,
    className,
    selectorVisible = true
  } = props;
  const sizeRef = useRef(size);
  const {
    t
  } = useParrotTranslation();
  useEffect(() => {
    if (sizeRef.current === size) return;
    sizeRef.current = size;
    onSizeChange == null ? void 0 : onSizeChange(size);
  }, [count, size, onSizeChange]);
  const selectOptions = useMemo(() => {
    if (!selectorVisible) return [];
    return Array.from({
      length: Math.ceil(count / size)
    }, (r, i) => {
      const value = i * size;
      const lastRange2 = value + size;
      return {
        value: i + 1,
        text: t("components.pagination_range", {
          range1: value + 1,
          range2: lastRange2 > count ? count : lastRange2
        })
      };
    });
  }, [selectorVisible, count, size, t]);
  let lastRange = current * size;
  lastRange = lastRange > count ? count : lastRange;
  const renderLeft = () => {
    if (!showTotal) return null;
    const content = t("components.pagination_total", {
      range1: (current - 1) * size + 1,
      range2: lastRange,
      total: count
    });
    if (selectorVisible) {
      return /* @__PURE__ */React__default.createElement(Dropdown, {
        placement: "topLeft",
        overlayClassName: DropdownOverlayStyle,
        overlay: /* @__PURE__ */React__default.createElement(Menu, null, /* @__PURE__ */React__default.createElement(Menu.ItemGroup, {
          title: t("components.push_to")
        }, selectOptions.map(option => /* @__PURE__ */React__default.createElement(Menu.Item, {
          key: option.value,
          onClick: () => onChange(option.value)
        }, option.text))))
      }, /* @__PURE__ */React__default.createElement(Icon, {
        alt: "arrowChevronDownSmall16Secondary",
        className: "pagination-left dropdown-trigger",
        src: ArrowChevronDownSmall16SecondaryIcon,
        hoverSrc: ArrowChevronDownSmall16BlueIcon,
        prefix: content
      }));
    }
    return /* @__PURE__ */React__default.createElement("span", {
      className: "pagination-left"
    }, content);
  };
  if (count === 0) {
    return null;
  }
  return /* @__PURE__ */React__default.createElement("div", {
    className: cs(PaginationStyle, "pagination-wrapper", className, selectorVisible && "has-selector")
  }, renderLeft(), /* @__PURE__ */React__default.createElement("span", {
    className: "pagination-right"
  }, current > 1 && /* @__PURE__ */React__default.createElement(Button, {
    className: "prev-btn",
    type: "quiet",
    size: "small",
    prefixIcon: /* @__PURE__ */React__default.createElement(Icon, {
      alt: "arrowChevronLeftSmall16BoldBlue",
      src: ArrowChevronLeftSmall16BoldBlueIcon
    }),
    onClick: () => {
      onChange == null ? void 0 : onChange(current - 1);
    }
  }, t("components.previous_items", {
    size
  })), current * size < count && /* @__PURE__ */React__default.createElement(Button, {
    className: "next-btn",
    type: "quiet",
    size: "small",
    suffixIcon: /* @__PURE__ */React__default.createElement(Icon, {
      alt: "arrowChevronLeftSmall16BoldBlue",
      src: ArrowChevronLeftSmall16BoldBlueIcon
    }),
    onClick: () => {
      onChange == null ? void 0 : onChange(current + 1);
    }
  }, t("components.next_items", {
    size
  }))));
};
var Pagination$1 = Pagination;

export { PaginationStyle, Pagination$1 as default };
