Pagination

"use client"

import { useRender } from "@base-ui/react/use-render"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { clsx } from "clsx"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { buttonStyles, type ButtonSize } from "@/components/ui/button"
import { breakpoints } from "@/theme/breakpoints.stylex"
import { space } from "@/theme/tokens.stylex"

const styles = stylex.create({
  nav: {
    display: "flex",
    justifyContent: "center",
    width: "100%",
    marginInline: "auto",
  },
  content: {
    display: "flex",
    alignItems: "center",
    gap: space.s0_5,
    listStyleType: "none",
  },
  ellipsis: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: space.s8,
    height: space.s8,
    "--carbon-icon-size": space.s4,
  },
  text: {
    display: { default: "none", [breakpoints.sm]: "block" },
  },
})

const paginationStyles = {
  nav: styles.nav,
  content: styles.content,
  ellipsis: styles.ellipsis,
  text: styles.text,
}

type Overrides = { xstyle?: StyleXStyles; className?: string }

function Pagination({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"nav"> & Overrides) {
  const sx = stylex.props(styles.nav, xstyle)
  return useRender({
    defaultTagName: "nav",
    render,
    ref,
    props: {
      "aria-label": "pagination",
      "data-slot": "pagination",
      ...sx,
      ...props,
      className: clsx(sx.className, className),
      style: { ...sx.style, ...style },
    },
  })
}

function PaginationContent({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"ul"> & Overrides) {
  const sx = stylex.props(styles.content, xstyle)
  return useRender({
    defaultTagName: "ul",
    render,
    ref,
    props: {
      "data-slot": "pagination-content",
      ...sx,
      ...props,
      className: clsx(sx.className, className),
      style: { ...sx.style, ...style },
    },
  })
}

function PaginationItem({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"li"> & Overrides) {
  const sx = stylex.props(xstyle)
  return useRender({
    defaultTagName: "li",
    render,
    ref,
    props: {
      "data-slot": "pagination-item",
      ...sx,
      ...props,
      className: clsx(sx.className, className),
      style: { ...sx.style, ...style },
    },
  })
}

type PaginationLinkProps = useRender.ComponentProps<"a", { active: boolean }> & {
  isActive?: boolean
  size?: ButtonSize
  xstyle?: StyleXStyles
}

function PaginationLink({
  isActive = false,
  size = "icon",
  xstyle,
  className,
  render,
  ...props
}: PaginationLinkProps) {
  const variant = isActive ? "outline" : "ghost"
  const sx = stylex.props(
    buttonStyles.base,
    buttonStyles.pressable,
    buttonStyles.variants[variant],
    buttonStyles.sizes[size],
    xstyle,
  )
  return useRender({
    defaultTagName: "a",
    render,
    state: { active: isActive },
    stateAttributesMapping: { active: (active) => (active ? { "data-active": "true" } : null) },
    props: {
      "aria-current": isActive ? "page" : undefined,
      "data-slot": "pagination-link",
      "data-variant": variant,
      "data-size": size,
      ...sx,
      ...props,
      className: clsx("carbon-icons", sx.className, className),
    },
  })
}

type PaginationDirectionProps = PaginationLinkProps & {
  text?: string
}

function PaginationPrevious({
  text = "Previous",
  size = "default",
  xstyle,
  ...props
}: PaginationDirectionProps) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size={size}
      xstyle={[buttonStyles.iconStart[size], xstyle]}
      {...props}
    >
      <ChevronLeft />
      <span data-slot="pagination-previous-text" {...stylex.props(styles.text)}>
        {text}
      </span>
    </PaginationLink>
  )
}

function PaginationNext({
  text = "Next",
  size = "default",
  xstyle,
  ...props
}: PaginationDirectionProps) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size={size}
      xstyle={[buttonStyles.iconEnd[size], xstyle]}
      {...props}
    >
      <span data-slot="pagination-next-text" {...stylex.props(styles.text)}>
        {text}
      </span>
      <ChevronRight />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"span"> & Overrides) {
  const sx = stylex.props(styles.ellipsis, xstyle)
  return useRender({
    defaultTagName: "span",
    render,
    ref,
    props: {
      "aria-hidden": "true",
      "data-slot": "pagination-ellipsis",
      ...sx,
      ...props,
      className: clsx("carbon-icons", sx.className, className),
      style: { ...sx.style, ...style },
      children: (
        <>
          <MoreHorizontal />
        </>
      ),
    },
  })
}

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  paginationStyles,
}