import {
  IconButton
} from "./chunk-O3DNDMV3.js";
import {
  Typo
} from "./chunk-52MVZ6AN.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  DoubleArrowLeftIcon,
  DoubleArrowRightIcon
} from "./chunk-HLFG5ZTU.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-N552FDTV.js";

// src/atoms/pagination.tsx
import { useCallback, useEffect, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function Pagination(props) {
  const { onChange, count = 0, siblingCount = 2 } = props;
  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
  const visibleItems = useMemo(() => {
    let start = Math.max(1, page - siblingCount);
    let end = Math.min(count, page + siblingCount);
    if (page - siblingCount <= 0 && end < count) {
      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
    } else if (page + siblingCount > count && start > 1) {
      start = Math.max(1, start - (page + siblingCount - count));
    }
    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
  }, [count, page, siblingCount]);
  useEffect(() => {
    onChange == null ? void 0 : onChange(page);
  }, [onChange, page]);
  useEffect(() => {
    if (props.page) {
      setPage(props.page);
    }
  }, [props.page]);
  const prev = useMemo(() => {
    const p = page - 1;
    return p < 1 ? void 0 : p;
  }, [page]);
  const next = useMemo(() => {
    const n = page + 1;
    return n > count ? void 0 : n;
  }, [count, page]);
  const onClickPrev = useCallback(() => {
    prev && setPage(prev);
  }, [prev]);
  const onClickNext = useCallback(() => {
    next && setPage(next);
  }, [next]);
  const doublePrev = useMemo(() => {
    if (!visibleItems.length)
      return;
    return Math.max(0, visibleItems[0] - 1);
  }, [visibleItems]);
  const onClickDoublePrev = useCallback(() => {
    doublePrev && setPage(doublePrev);
  }, [doublePrev]);
  const doubleNext = useMemo(() => {
    if (!visibleItems.length)
      return;
    const n = visibleItems[visibleItems.length - 1] + 1;
    if (n > count)
      return;
    return Math.min(count, n);
  }, [count, visibleItems]);
  const onClickDoubleNext = useCallback(() => {
    doubleNext && setPage(doubleNext);
  }, [doubleNext]);
  const iconSize = {
    height: 24,
    width: 24
  };
  const moveButtonProps = {
    variant: "ghost",
    size: "3",
    style: { borderRadius: "50%" }
  };
  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
    /* @__PURE__ */ jsx(
      IconButton,
      __spreadProps(__spreadValues({
        disabled: !doublePrev,
        onClick: onClickDoublePrev
      }, moveButtonProps), {
        children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, __spreadValues({}, iconSize))
      })
    ),
    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize)) })),
    /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
      return /* @__PURE__ */ jsx(
        "button",
        {
          className: `page-button ${item === page ? "active" : ""}`,
          onClick: () => {
            setPage(item);
          },
          type: "button",
          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
        },
        item
      );
    }) }),
    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize)) })),
    /* @__PURE__ */ jsx(
      IconButton,
      __spreadProps(__spreadValues({
        disabled: !doubleNext,
        onClick: onClickDoubleNext
      }, moveButtonProps), {
        children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, __spreadValues({}, iconSize))
      })
    )
  ] });
}

export {
  Pagination
};
//# sourceMappingURL=chunk-DONK6DLV.js.map