Slider

"use client"

import type { CSSProperties } from "react"
import { use, useState } from "react"
import { Slider as SliderPrimitive } from "@base-ui/react/slider"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"

import { stateStyles } from "@/lib/state-styles"
import { FieldStateContext } from "@/lib/field-state"
import { states } from "@/theme/states"
import { color, duration, ease, radius, shadow, space } from "@/theme/tokens.stylex"

const thumbEdge = "oklch(0 0 0 / 8%)"
const sliderThumbBg = `light-dark(${color.background}, ${color.foreground})`

const styles = stylex.create({
  root: {
    width: "100%",
  },
  rootVertical: {
    width: null,
    height: "100%",
  },
  control: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    width: "100%",
    touchAction: "none",
    userSelect: "none",
  },
  controlVertical: {
    flexDirection: "column",
    width: "auto",
    height: "100%",
    minHeight: "10rem",
  },
  track: {
    position: "relative",
    flexGrow: 1,
    width: "100%",
    height: space.s1,
    overflow: "hidden",
    borderRadius: radius.full,
    backgroundColor: color.muted,
    boxShadow: shadow.groove,
  },
  trackVertical: {
    width: space.s1,
    height: "100%",
  },
  range: {
    backgroundColor: color.primary,
  },
  thumb: {
    width: space.s3,
    height: space.s3,
    borderRadius: radius.full,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: thumbEdge,
    backgroundColor: sliderThumbBg,
    backgroundImage: `linear-gradient(to bottom, transparent, ${color.thumbShade})`,
    backgroundOrigin: "border-box",
    outlineStyle: "none",
    boxShadow: {
      default: shadow.thumb,
      ":hover": {
        default: shadow.thumb,
        "@media (hover: hover)": `${shadow.thumb}, ${shadow.ring}`,
      },
    },
    transitionProperty: "box-shadow",
    transitionDuration: duration.color,
    transitionTimingFunction: ease.standard,
    "::after": {
      content: '""',
      position: "absolute",
      inset: `calc(-1 * ${space.s2})`,
    },
  },
  thumbRing: { borderColor: color.ring, boxShadow: `${shadow.thumb}, ${shadow.ring}` },
})

const sliderStyles = {
  root: styles.root,
  rootVertical: styles.rootVertical,
  control: styles.control,
  controlVertical: styles.controlVertical,
  disabled: states.disabled,
  track: styles.track,
  trackVertical: styles.trackVertical,
  range: styles.range,
  thumb: styles.thumb,
  thumbRing: styles.thumbRing,
}

type StateOverrides = { xstyle?: StyleXStyles; style?: CSSProperties; className?: string }

type SliderProps<Value extends number | readonly number[]> = Omit<
  SliderPrimitive.Root.Props<Value>,
  "className" | "style"
> &
  StateOverrides

function Slider<Value extends number | readonly number[]>({
  xstyle,
  style,
  className,
  value,
  defaultValue,
  ...props
}: SliderProps<Value>) {
  const count = Array.isArray(value)
    ? value.length
    : Array.isArray(defaultValue)
      ? defaultValue.length
      : 1

  return (
    <SliderPrimitive.Root
      data-slot="slider"
      value={value}
      defaultValue={defaultValue}
      thumbAlignment="edge"
      {...props}
      {...stateStyles(
        (state) => [styles.root, state.orientation === "vertical" && styles.rootVertical, xstyle],
        { className, style },
      )}
    >
      <SliderPrimitive.Control
        data-slot="slider-control"
        {...stateStyles((state) => [
          styles.control,
          state.orientation === "vertical" && styles.controlVertical,
          state.disabled && states.disabled,
        ])}
      >
        <SliderPrimitive.Track
          data-slot="slider-track"
          {...stateStyles((state) => [
            styles.track,
            state.orientation === "vertical" && styles.trackVertical,
          ])}
        >
          <SliderPrimitive.Indicator data-slot="slider-range" {...stylex.props(styles.range)} />
        </SliderPrimitive.Track>
        {Array.from({ length: count }, (_, index) => (
          <SliderThumb
            key={index}
            index={index}
            invalid={props["aria-invalid"] === true || props["aria-invalid"] === "true"}
          />
        ))}
      </SliderPrimitive.Control>
    </SliderPrimitive.Root>
  )
}

function SliderThumb({ index, invalid }: { index: number; invalid: boolean }) {
  const fieldState = use(FieldStateContext)
  const [focusVisible, setFocusVisible] = useState(false)

  return (
    <SliderPrimitive.Thumb
      data-slot="slider-thumb"
      data-focus-visible={focusVisible ? "" : undefined}
      index={index}
      onFocus={(event) => setFocusVisible(event.target.matches(":focus-visible"))}
      onBlur={() => setFocusVisible(false)}
      onKeyDown={() => setFocusVisible(true)}
      {...stateStyles((state) => [
        styles.thumb,
        (state.valid === false || fieldState?.valid === false || invalid) && states.invalidRing,
        (focusVisible || (state.dragging && state.activeThumbIndex === index)) && styles.thumbRing,
      ])}
    />
  )
}

export { Slider, sliderStyles }