Scroll Area

"use client"

import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { clsx } from "clsx"

import { states } from "@/theme/states"
import { color, duration, ease, radius, space } from "@/theme/tokens.stylex"

const styles = stylex.create({
  viewport: {
    width: "100%",
    height: "100%",
    borderRadius: "inherit",
    transitionProperty: "box-shadow",
    transitionDuration: duration.color,
    transitionTimingFunction: ease.standard,
  },
  scrollbar: {
    display: "flex",
    touchAction: "none",
    userSelect: "none",
    padding: 1,
  },
  thumb: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: "0%",
    borderRadius: radius.full,
    backgroundColor: color.border,
  },
})

const orientations = stylex.create({
  vertical: {
    width: space.s2_5,
    paddingInlineStart: 2,
  },
  horizontal: {
    height: space.s2_5,
    flexDirection: "column",
    paddingBlockStart: 2,
  },
})

const scrollAreaStyles = {
  viewport: [styles.viewport, states.focusRing],
  scrollbar: styles.scrollbar,
  orientations,
  thumb: styles.thumb,
}

type ScrollBarOrientation = keyof typeof orientations

type StyleProps = {
  xstyle?: StyleXStyles
  className?: string
}

type ScrollAreaViewportProps = Omit<ScrollAreaPrimitive.Viewport.Props, "className"> & StyleProps

type ScrollAreaProps = Omit<ScrollAreaPrimitive.Root.Props, "className"> &
  StyleProps & {
    viewportProps?: ScrollAreaViewportProps
  }

function ScrollArea({ xstyle, className, viewportProps, children, ...props }: ScrollAreaProps) {
  const sx = stylex.props(xstyle)
  const {
    xstyle: viewportXstyle,
    className: viewportClassName,
    ...viewportRest
  } = viewportProps ?? {}
  const viewportSx = stylex.props(styles.viewport, states.focusRing, viewportXstyle)

  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        {...viewportSx}
        {...viewportRest}
        className={clsx(viewportSx.className, viewportClassName)}
      >
        <ScrollAreaPrimitive.Content data-slot="scroll-area-content">
          {children}
        </ScrollAreaPrimitive.Content>
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
    </ScrollAreaPrimitive.Root>
  )
}

type ScrollBarProps = Omit<ScrollAreaPrimitive.Scrollbar.Props, "className" | "orientation"> &
  StyleProps & {
    orientation?: ScrollBarOrientation
  }

function ScrollBar({ xstyle, className, orientation = "vertical", ...props }: ScrollBarProps) {
  const sx = stylex.props(styles.scrollbar, orientations[orientation], xstyle)

  return (
    <ScrollAreaPrimitive.Scrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    >
      <ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" {...stylex.props(styles.thumb)} />
    </ScrollAreaPrimitive.Scrollbar>
  )
}

export { ScrollArea, ScrollBar, scrollAreaStyles, type ScrollBarOrientation }