SlideriOS

import * as React from "react";
import { forwardRef, useCallback } from "react";
import { View, type ViewProps, type GestureResponderEvent, type LayoutChangeEvent, } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
import { cn, useHaptic, spring, useReducedMotion, useTheme } from "@lumioui/core";
import { Glass } from "../glass";

const THUMB = 22;
const TRACK_H = 4;

export interface SliderProps extends Omit<ViewProps, "className"> {
  /** Controlled value. Omit + use defaultValue for uncontrolled. */
  value?: number;
  /** Uncontrolled initial value. Default min. */
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  className?: string;
  /** Show tick marks for each step. Default false. */
  showTicks?: boolean;
  /** Liquid-glass track + thumb — a frosted lane with a glass disc. */
  glass?: boolean;
}

/**
 * Slider — iOS-style slider with smooth spring-animated thumb.
 *
 * Matches SwiftUI's `Slider` — drag or tap a track to set a stepped
 * numeric value. Features:
 * - Smooth spring-animated thumb (glide spring)
 * - Thumb grows while dragged, bounces on release
 * - Haptic feedback on each step crossing
 * - Optional tick marks for stepped values
 * - Fill track in primary color
 */
export const Slider = forwardRef<React.ElementRef<typeof View>, SliderProps>(
  function Slider(
    { value: controlledValue, defaultValue, onValueChange, min = 0, max = 100, step = 1, disabled, className, showTicks = false, glass = false, ...props },
    ref
  ) {
    const haptics = useHaptic();
    const { colors } = useTheme();
    const reducedMotion = useReducedMotion();
    const [internal, setInternal] = React.useState(defaultValue ?? min);
    // Resolve during render, never in a passive effect.
    const value = controlledValue ?? internal;
    const trackWidth = useSharedValue(0);
    // Plain-state mirror of the track width — shared values read during
    // render don't subscribe, so ticks need state to position on layout.
    const [trackW, setTrackW] = React.useState(0);
    const targetProgress = useSharedValue((value - min) / (max - min));
    const thumbScale = useSharedValue(1);
    const lastStep = React.useRef(value);
    // While a finger is on the track the thumb must track 1:1 — a spring
    // there feels like lag. Taps and programmatic changes get the glide.
    const dragging = React.useRef(false);

    // Smooth the thumb position with a glide spring. Reduced motion: snap —
    // no travel, the fill width still lands.
    React.useEffect(() => {
      const p = (value - min) / (max - min);
      if (reducedMotion || dragging.current) targetProgress.value = p;
      else targetProgress.value = withSpring(p, spring.glide);
    }, [value, min, max, targetProgress, reducedMotion]);

    const updateFromTouch = useCallback(
      (locationX: number) => {
        if (trackWidth.value <= 0) return;
        const ratio = Math.min(Math.max(locationX / trackWidth.value, 0), 1);
        let next = min + ratio * (max - min);
        if (step > 0) {
          next = Math.round((next - min) / step) * step + min;
        }
        next = Math.min(Math.max(next, min), max);
        if (next !== value) {
          // Haptic on step crossing
          if (Math.round(next / step) !== Math.round(lastStep.current / step)) {
            haptics.selection();
            lastStep.current = next;
          }
          if (controlledValue === undefined) setInternal(next);
          onValueChange?.(next);
        }
      },
      [value, controlledValue, min, max, step, onValueChange, haptics, trackWidth]
    );

    const onResponderGrant = (e: GestureResponderEvent) => {
      if (disabled) return;
      thumbScale.value = reducedMotion ? 1 : withSpring(1.2, spring.bouncy);
      // Grant stays "not dragging" — a tap glides to the touch point;
      // the first move below flips into 1:1 tracking.
      updateFromTouch(e.nativeEvent.locationX);
    };
    const onResponderMove = (e: GestureResponderEvent) => {
      if (disabled) return;
      dragging.current = true;
      updateFromTouch(e.nativeEvent.locationX);
    };
    const onResponderEnd = (e: GestureResponderEvent) => {
      if (disabled) return;
      // Bouncy land
      thumbScale.value = reducedMotion ? 1 : withSpring(1, spring.bouncy);
      updateFromTouch(e.nativeEvent.locationX);
      // Clear after the final update so a last-step change still lands
      // with a small settle spring instead of a hard stop.
      dragging.current = false;
    };

    const onLayout = (e: LayoutChangeEvent) => {
      trackWidth.value = e.nativeEvent.layout.width;
      setTrackW(e.nativeEvent.layout.width);
    };

    const fillStyle = useAnimatedStyle(() => ({
      width: targetProgress.value * trackWidth.value,
    }));

    const thumbStyle = useAnimatedStyle(() => ({
      transform: [
        { translateX: targetProgress.value * Math.max(0, trackWidth.value - THUMB) },
        { scale: thumbScale.value },
      ],
    }));

    // Compute tick positions
    const ticks = React.useMemo(() => {
      if (!showTicks || step <= 0) return [];
      const count = Math.floor((max - min) / step) + 1;
      if (count > 30) return []; // too many ticks
      return Array.from({ length: count }, (_, i) => min + i * step);
    }, [showTicks, min, max, step]);

    // Screen-reader stepper: adjustable elements get VoiceOver/TalkBack actions.
    const handleAccessibilityAction = (e: { nativeEvent: { actionName: string } }) => {
      if (disabled) return;
      const delta = e.nativeEvent.actionName === "decrement" ? -step : step;
      const next = Math.min(max, Math.max(min, value + delta));
      if (next !== value) {
        haptics.selection();
        if (controlledValue === undefined) setInternal(next);
        onValueChange?.(next);
      }
    };

    return (
      <View
        ref={ref}
        className={cn("h-11 justify-center", disabled && "opacity-50", className)}
        // The whole 44pt row is the touch surface — the 4pt visual track
        // alone was nearly untappable.
        onStartShouldSetResponder={() => !disabled}
        onMoveShouldSetResponder={() => !disabled}
        onResponderGrant={onResponderGrant}
        onResponderMove={onResponderMove}
        onResponderRelease={onResponderEnd}
        onResponderTerminate={onResponderEnd}
        accessibilityRole="adjustable"
        accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
        onAccessibilityAction={handleAccessibilityAction}
        accessibilityValue={{ min, max, now: value }}
        accessibilityState={{ disabled }}
        // accessibilityValue/accessibilityState aren't forwarded to the DOM
        // on web — mirror them with explicit aria-* props.
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={value}
        aria-valuetext={String(value)}
        aria-disabled={disabled ?? false}
        {...props}
      >
        <View
          onLayout={onLayout}
          className={cn("w-full", !glass && "bg-muted")}
          style={{ height: glass ? 24 : TRACK_H, borderRadius: (glass ? 24 : TRACK_H) / 2 }}
        >
          {glass ? (
            <Glass
              effect="clear"
              className="absolute inset-0 rounded-full"
              pointerEvents="none"
            />
          ) : null}
          {/* Fill — fill/thumb colors ride animated style-props, so raw
              theme colors (not classes) are required here. */}
          <Animated.View
            style={[
              {
                position: "absolute",
                left: 0,
                top: 0,
                bottom: 0,
                borderRadius: (glass ? 24 : TRACK_H) / 2,
                backgroundColor: colors.primary,
              },
              fillStyle,
            ]}
          />

          {/* Tick marks */}
          {ticks.map((tick, i) => {
            const ratio = (tick - min) / (max - min);
            return (
              <View
                key={i}
                style={{
                  position: "absolute",
                  width: 2,
                  height: 2,
                  borderRadius: 1,
                  backgroundColor: colors.mutedForeground,
                  opacity: 0.4,
                  left: ratio * (trackW - 2) || 0,
                  top: (glass ? 24 : TRACK_H) / 2 - 1,
                }}
              />
            );
          })}

          {/* Thumb */}
          <Animated.View
            style={[
              {
                width: THUMB,
                height: THUMB,
                borderRadius: THUMB / 2,
                position: "absolute",
                top: glass ? (24 - THUMB) / 2 : -(THUMB - TRACK_H) / 2,
                // Physical-thumb drop shadow — raw black reads correctly on
                // both schemes (iOS idiom), so intentionally not a token.
                // Glass mode relies on the material's own depth instead.
                ...(glass
                  ? {}
                  : {
                      shadowColor: "#000",
                      shadowOpacity: 0.2,
                      shadowRadius: 4,
                      shadowOffset: { width: 0, height: 2 },
                      elevation: 3,
                    }),
              },
              thumbStyle,
            ]}
            className={glass ? "overflow-hidden" : "bg-primary"}
          >
            {glass ? (
              <Glass
                effect="regular"
                sheen={0.6}
                bend={0.4}
                className="absolute inset-0 rounded-full"
                pointerEvents="none"
              />
            ) : null}
          </Animated.View>
        </View>
      </View>
    );
  }
);

Slider.displayName = "Slider";