"use client";
import { paginationVariants } from '@heroui/styles';
import React__default, { createContext, useContext } from 'react';
import { Button } from 'react-aria-components';
import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
import { IconChevronLeft, IconChevronRight } from '../icons.js';
import { jsx } from 'react/jsx-runtime';

const PaginationContext = /*#__PURE__*/createContext({});

/* -------------------------------------------------------------------------------------------------
 * Pagination Root
 * -----------------------------------------------------------------------------------------------*/

const PaginationRoot = ({
  children,
  className,
  size,
  ...props
}) => {
  const slots = React__default.useMemo(() => paginationVariants({
    size
  }), [size]);
  return /*#__PURE__*/jsx(PaginationContext, {
    value: {
      slots
    },
    children: /*#__PURE__*/jsx("nav", {
      "aria-label": "pagination",
      "data-slot": "pagination",
      role: "navigation",
      ...props,
      className: composeSlotClassName(slots.base, className),
      children: children
    })
  });
};
PaginationRoot.displayName = "HeroUI.Pagination";

/* -------------------------------------------------------------------------------------------------
 * Pagination Summary
 * -----------------------------------------------------------------------------------------------*/

const PaginationSummary = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  return /*#__PURE__*/jsx("div", {
    className: composeSlotClassName(slots?.summary, className),
    "data-slot": "pagination-summary",
    ...props,
    children: children
  });
};
PaginationSummary.displayName = "HeroUI.Pagination.Summary";

/* -------------------------------------------------------------------------------------------------
 * Pagination Content
 * -----------------------------------------------------------------------------------------------*/

const PaginationContent = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  return /*#__PURE__*/jsx("ul", {
    className: composeSlotClassName(slots?.content, className),
    "data-slot": "pagination-content",
    ...props,
    children: children
  });
};
PaginationContent.displayName = "HeroUI.Pagination.Content";

/* -------------------------------------------------------------------------------------------------
 * Pagination Item
 * -----------------------------------------------------------------------------------------------*/

const PaginationItem = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  return /*#__PURE__*/jsx("li", {
    className: composeSlotClassName(slots?.item, className),
    "data-slot": "pagination-item",
    ...props,
    children: children
  });
};
PaginationItem.displayName = "HeroUI.Pagination.Item";

/* -------------------------------------------------------------------------------------------------
 * Pagination Link
 * -----------------------------------------------------------------------------------------------*/

const PaginationLink = ({
  children,
  className,
  isActive,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  return /*#__PURE__*/jsx(Button, {
    "aria-current": isActive ? "page" : undefined,
    className: composeTwRenderProps(className, slots?.link()),
    "data-active": isActive ? "true" : undefined,
    "data-slot": "pagination-link",
    ...props,
    children: children
  });
};
PaginationLink.displayName = "HeroUI.Pagination.Link";

/* -------------------------------------------------------------------------------------------------
 * Pagination Previous
 * -----------------------------------------------------------------------------------------------*/

const PaginationPrevious = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  const baseClass = `${slots?.link() ?? ""} pagination__link--nav`.trim();
  return /*#__PURE__*/jsx(Button, {
    className: composeTwRenderProps(className, baseClass),
    "data-slot": "pagination-previous",
    ...props,
    children: children
  });
};
PaginationPrevious.displayName = "HeroUI.Pagination.Previous";

/* -------------------------------------------------------------------------------------------------
 * Pagination Previous Icon
 * -----------------------------------------------------------------------------------------------*/

const PaginationPreviousIcon = ({
  children,
  className,
  ...props
}) => {
  return /*#__PURE__*/jsx("span", {
    "aria-hidden": "true",
    className: className,
    "data-slot": "pagination-previous-icon",
    ...props,
    children: children ?? /*#__PURE__*/jsx(IconChevronLeft, {})
  });
};
PaginationPreviousIcon.displayName = "HeroUI.Pagination.PreviousIcon";

/* -------------------------------------------------------------------------------------------------
 * Pagination Next
 * -----------------------------------------------------------------------------------------------*/

const PaginationNext = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  const baseClass = `${slots?.link() ?? ""} pagination__link--nav`.trim();
  return /*#__PURE__*/jsx(Button, {
    className: composeTwRenderProps(className, baseClass),
    "data-slot": "pagination-next",
    ...props,
    children: children
  });
};
PaginationNext.displayName = "HeroUI.Pagination.Next";

/* -------------------------------------------------------------------------------------------------
 * Pagination Next Icon
 * -----------------------------------------------------------------------------------------------*/

const PaginationNextIcon = ({
  children,
  className,
  ...props
}) => {
  return /*#__PURE__*/jsx("span", {
    "aria-hidden": "true",
    className: className,
    "data-slot": "pagination-next-icon",
    ...props,
    children: children ?? /*#__PURE__*/jsx(IconChevronRight, {})
  });
};
PaginationNextIcon.displayName = "HeroUI.Pagination.NextIcon";

/* -------------------------------------------------------------------------------------------------
 * Pagination Ellipsis
 * -----------------------------------------------------------------------------------------------*/

const PaginationEllipsis = ({
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(PaginationContext);
  return /*#__PURE__*/jsx("span", {
    "aria-hidden": "true",
    className: composeSlotClassName(slots?.ellipsis, className),
    "data-slot": "pagination-ellipsis",
    ...props,
    children: "\u2026"
  });
};
PaginationEllipsis.displayName = "HeroUI.Pagination.Ellipsis";

export { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextIcon, PaginationPrevious, PaginationPreviousIcon, PaginationRoot, PaginationSummary };
