Number Field

"use client"

import { use, type CSSProperties, type ComponentProps } from "react"
import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { ArrowLeftRight, Minus, Plus } from "lucide-react"

import { InputGroupContext, inputStyles } from "@/components/ui/input"
import { InputGroup, InputGroupButton } from "@/components/ui/input-group"
import { FieldStateContext } from "@/lib/field-state"
import { stateStyles } from "@/lib/state-styles"
import { states } from "@/theme/states"
import { space } from "@/theme/tokens.stylex"

const styles = stylex.create({
  root: { display: "flex", flexDirection: "column", gap: space.s2 },
  group: { flexWrap: "nowrap", paddingInline: space.s1 },
  input: { textAlign: "center", fontVariantNumeric: "tabular-nums" },
  undim: { opacity: 1 },
  scrubArea: {
    display: "inline-flex",
    width: "fit-content",
    cursor: "ew-resize",
    userSelect: "none",
  },
  verticalScrub: { cursor: "ns-resize" },
  inertScrub: { cursor: "default" },
  cursor: { "--carbon-icon-size": space.s5 },
})
const numberFieldStyles = {
  ...styles,
  inputBase: inputStyles.base,
  inputInGroup: inputStyles.inGroup,
}
type Overrides = { xstyle?: StyleXStyles; className?: string; style?: CSSProperties }

function NumberField({
  xstyle,
  className,
  style,
  ...props
}: Omit<NumberFieldPrimitive.Root.Props, "className" | "style"> & Overrides) {
  return (
    <NumberFieldPrimitive.Root
      data-slot="number-field"
      {...props}
      {...stateStyles(() => [styles.root, xstyle], { className, style })}
    />
  )
}

function NumberFieldGroup({
  render,
  xstyle,
  ...props
}: Omit<NumberFieldPrimitive.Group.Props, "className" | "style"> & Overrides) {
  return (
    <NumberFieldPrimitive.Group
      data-slot="number-field-group"
      {...props}
      render={(groupProps, state) => (
        <InputGroup
          {...groupProps}
          disabled={state.disabled}
          invalid={state.valid === false}
          xstyle={[styles.group, xstyle]}
          render={typeof render === "function" ? (props) => render(props, state) : render}
        />
      )}
    />
  )
}

function NumberFieldInput({
  xstyle,
  className,
  style,
  ...props
}: Omit<NumberFieldPrimitive.Input.Props, "className" | "style"> & Overrides) {
  const group = use(InputGroupContext)
  const field = use(FieldStateContext)
  return (
    <NumberFieldPrimitive.Input
      data-slot={group ? "input-group-control" : "number-field-input"}
      {...props}
      {...stateStyles(
        (state) => [
          inputStyles.base,
          !group &&
            (state.valid === false ||
              field?.valid === false ||
              props["aria-invalid"] === true ||
              props["aria-invalid"] === "true") &&
            states.invalidRing,
          !group && state.disabled && states.disabled,
          group && inputStyles.inGroup,
          styles.input,
          xstyle,
        ],
        { className, style },
      )}
    />
  )
}

type StepperProps = Omit<NumberFieldPrimitive.Increment.Props, "className" | "style"> &
  Overrides &
  Pick<ComponentProps<typeof InputGroupButton>, "variant" | "size">
function NumberFieldStepper({
  primitive: Primitive,
  render,
  children,
  xstyle,
  variant = "ghost",
  nativeButton = true,
  size = "icon-xs",
  ...props
}: StepperProps & { primitive: typeof NumberFieldPrimitive.Increment }) {
  const group = use(InputGroupContext)
  return (
    <Primitive
      {...props}
      nativeButton={nativeButton}
      render={(buttonProps, state) => (
        <InputGroupButton
          {...buttonProps}
          disabled={state.disabled || state.readOnly}
          focusableWhenDisabled
          nativeButton={nativeButton}
          variant={variant}
          size={size}
          xstyle={[group?.disabled && styles.undim, xstyle]}
          render={typeof render === "function" ? (props) => render(props, state) : render}
        >
          {children}
        </InputGroupButton>
      )}
    />
  )
}
function NumberFieldDecrement({ children, ...props }: StepperProps) {
  return (
    <NumberFieldStepper
      primitive={NumberFieldPrimitive.Decrement}
      data-slot="number-field-decrement"
      aria-label="Decrease"
      {...props}
    >
      {children ?? <Minus />}
    </NumberFieldStepper>
  )
}
function NumberFieldIncrement({ children, ...props }: StepperProps) {
  return (
    <NumberFieldStepper
      primitive={NumberFieldPrimitive.Increment}
      data-slot="number-field-increment"
      aria-label="Increase"
      {...props}
    >
      {children ?? <Plus />}
    </NumberFieldStepper>
  )
}
function NumberFieldToolbarInput({
  focusableWhenDisabled = true,
  ...props
}: ComponentProps<typeof NumberFieldInput> & { focusableWhenDisabled?: boolean }) {
  return (
    <ToolbarPrimitive.Input
      disabled={props.disabled}
      focusableWhenDisabled={focusableWhenDisabled}
      render={<NumberFieldInput {...props} />}
    />
  )
}

function NumberFieldScrubArea({
  direction = "horizontal",
  xstyle,
  className,
  style,
  ...props
}: Omit<NumberFieldPrimitive.ScrubArea.Props, "className" | "style"> & Overrides) {
  return (
    <NumberFieldPrimitive.ScrubArea
      data-slot="number-field-scrub-area"
      direction={direction}
      {...props}
      {...stateStyles(
        (state) => [
          styles.scrubArea,
          direction === "vertical" && styles.verticalScrub,
          (state.disabled || state.readOnly) && styles.inertScrub,
          xstyle,
        ],
        { className, style },
      )}
    />
  )
}
function NumberFieldScrubAreaCursor({
  children,
  xstyle,
  className,
  style,
  ...props
}: Omit<NumberFieldPrimitive.ScrubAreaCursor.Props, "className" | "style"> & Overrides) {
  return (
    <NumberFieldPrimitive.ScrubAreaCursor
      data-slot="number-field-scrub-area-cursor"
      {...props}
      {...stateStyles(() => [styles.cursor, xstyle], { className, style, hook: "carbon-icons" })}
    >
      {children ?? <ArrowLeftRight />}
    </NumberFieldPrimitive.ScrubAreaCursor>
  )
}

export {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldToolbarInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
  numberFieldStyles,
}