import { ArrowChevronLeftSmall16BoldBlueIcon } from '@cloudtower/icons-react';
import Button from '../Button/index.js';
import Icon from '../Icon/index.js';
import InputInteger from '../InputInteger/index.js';
import { PaginationStyle } from '../Pagination/index.js';
import { Typo } from '../Typo/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import cs from 'classnames';
import React__default, { useCallback } from 'react';

const inputStyle = "E_ivqqkzv";
const SimplePagination = props => {
  const {
    className,
    current,
    count,
    size,
    onPageChange
  } = props;
  const {
    t
  } = useParrotTranslation();
  const pageLength = count === 0 ? 1 : Math.ceil(count / size);
  const showPrev = current > 1;
  const showNext = current * size < count;
  const changeValue = useCallback(value => {
    const page = parseInt(value);
    if (page > 0) {
      onPageChange == null ? void 0 : onPageChange(Math.min(pageLength, page));
    } else {
      onPageChange == null ? void 0 : onPageChange(1);
    }
  }, [onPageChange, pageLength]);
  return /* @__PURE__ */React__default.createElement("div", {
    className: cs(PaginationStyle, "pagination-wrapper", className)
  }, /* @__PURE__ */React__default.createElement("span", {
    className: Typo.Label.l3_regular_title
  }, t("components.pagination_lots_total", {
    count
  })), /* @__PURE__ */React__default.createElement("span", {
    className: "pagination-right"
  }, showPrev && /* @__PURE__ */React__default.createElement(Button, {
    className: "prev-btn",
    type: "quiet",
    size: "small",
    style: {
      marginRight: "8px"
    },
    prefixIcon: /* @__PURE__ */React__default.createElement(Icon, {
      alt: "arrowChevronLeftSmall16BoldBlue",
      src: ArrowChevronLeftSmall16BoldBlueIcon
    }),
    onClick: () => {
      onPageChange == null ? void 0 : onPageChange(current - 1);
    }
  }), /* @__PURE__ */React__default.createElement(InputInteger, {
    className: cs(Typo.Label.l3_regular, inputStyle),
    value: current,
    size: "small",
    onKeyDown: event => {
      if (event.key === "Enter") {
        changeValue(event.target.value);
      }
    },
    onBlur: event => {
      changeValue(event.target.value);
    }
  }), /* @__PURE__ */React__default.createElement("span", {
    className: cs("E_c1wk4q29", Typo.Label.l3_regular_upper)
  }, `/ ${pageLength}`), showNext && /* @__PURE__ */React__default.createElement(Button, {
    className: "next-btn",
    type: "quiet",
    size: "small",
    style: {
      marginLeft: "8px"
    },
    prefixIcon: /* @__PURE__ */React__default.createElement(Icon, {
      alt: "arrowChevronLeftSmall16BoldBlue",
      src: ArrowChevronLeftSmall16BoldBlueIcon
    }),
    onClick: () => {
      onPageChange == null ? void 0 : onPageChange(current + 1);
    }
  })));
};
var SimplePagination$1 = SimplePagination;

export { SimplePagination$1 as default };
