SkeletoniOS

import * as React from "react";
import { forwardRef, useEffect } from "react";
import { View, type ViewProps } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  cancelAnimation,
  interpolate,
  Easing,
} from "react-native-reanimated";
import { cn, useReducedMotion, useTheme } from "@lumioui/core";

/** Pulse breathing — ambient loop, intentionally outside the UI-motion band. */
const PULSE_CYCLE = { duration: 800, easing: Easing.inOut(Easing.ease) };
/** Shimmer sweep — one full traversal of the block. */
const SHIMMER_CYCLE = { duration: 1400, easing: Easing.inOut(Easing.quad) };

export interface SkeletonProps extends Omit<ViewProps, "className"> {
  className?: string;
  /**
   * "pulse" (default): gentle opacity breathing.
   * "shimmer": a light sweep travels across — the crafted loading look.
   */
  variant?: "pulse" | "shimmer";
}

/**
 * Skeleton — loading placeholder. Pulse breathes; shimmer sweeps a light
 * band left→right on repeat. Reduced-motion falls back to a static block.
 */
export const Skeleton = forwardRef<React.ElementRef<typeof View>, SkeletonProps>(
  function Skeleton({ className, variant = "pulse", style, onLayout, ...props }, ref) {
  const { dark, colors } = useTheme();
  const reduceMotion = useReducedMotion();
  const opacity = useSharedValue(1);
  const sweep = useSharedValue(0);
  const width = useSharedValue(0);

  useEffect(() => {
    // Reduced motion: static block — cancel any running loop first so a
    // variant switch can't leave a stale repeat alive.
    if (reduceMotion) {
      cancelAnimation(opacity);
      cancelAnimation(sweep);
      opacity.value = 1;
      sweep.value = 0;
      return;
    }
    if (variant === "pulse") {
      cancelAnimation(sweep);
      sweep.value = 0;
      opacity.value = withRepeat(withTiming(0.5, PULSE_CYCLE), -1, true);
    } else {
      cancelAnimation(opacity);
      opacity.value = 1;
      sweep.value = withRepeat(withTiming(1, SHIMMER_CYCLE), -1, false);
    }
  }, [opacity, sweep, variant, reduceMotion]);

  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
  const sweepStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: -80 + sweep.value * (width.value + 160) }],
    // Fade the band in/out across the first/last 8% of the sweep so the
    // loop restart is never visible, even if a layout lands mid-cycle.
    opacity: interpolate(sweep.value, [0, 0.08, 0.92, 1], [0, 1, 1, 0], "clamp"),
  }));

  return (
    <Animated.View
      ref={ref}
      className={cn("overflow-hidden rounded-lg bg-muted", className)}
      style={[animatedStyle, style]}
      onLayout={(e) => {
        width.value = e.nativeEvent.layout.width;
        onLayout?.(e);
      }}
      accessible={false}
      // Placeholder blocks announce nothing — hide them from the a11y tree;
      // the loading state is communicated by the surrounding context.
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
      aria-hidden
      {...props}
    >
      {variant === "shimmer" && !reduceMotion ? (
        <Animated.View
          style={[
            {
              position: "absolute",
              top: 0,
              bottom: 0,
              width: 80,
              // Sheen band — theme foreground at a low alpha: a light sweep
              // in dark mode, a soft shadow sweep in light mode, so the
              // shimmer survives both schemes without a hardcoded white.
              // Hex alpha suffix — theme colors are 6-digit hex (loader
              // ring-track pattern).
              backgroundColor: `${colors.foreground}${dark ? "26" : "14"}`,
              transform: [{ skewX: "-12deg" }],
            },
            sweepStyle,
          ]}
        />
      ) : null}
    </Animated.View>
  );
});

Skeleton.displayName = "Skeleton";