"use strict";

import React, { useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
import { lazyRequire } from "../utils/lazy-require.js";

// react-native-svg is loaded lazily so the loading module can fall back to
// ActivityIndicator when the host app doesn't ship SVG support. Reanimated,
// by contrast, MUST be statically imported: the worklets Babel plugin
// performs build-time closure analysis (`__closure` metadata) that fails on
// runtime requires, which would crash the UI thread with
// "Tried to synchronously call a non-worklet function `addListener`".
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const getSvgModule = lazyRequire('react-native-svg');
/**
 * Inner component that unconditionally calls Reanimated hooks.
 * Only rendered when react-native-svg is available.
 */
const AnimatedSpinner = ({
  color = 'currentColor',
  size = 26,
  className,
  style,
  svg
}) => {
  const {
    default: Svg,
    Rect
  } = svg;
  const rotation = useSharedValue(0);
  useEffect(() => {
    rotation.value = withRepeat(withTiming(360, {
      duration: 400,
      easing: Easing.linear
    }), -1, false);
    // rotation is a stable shared value reference; withRepeat/withTiming/Easing
    // are module-level constants from a static import and are stable too.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{
      rotate: `${rotation.value}deg`
    }]
  }));
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [{
      width: size,
      height: size,
      alignItems: 'center',
      justifyContent: 'center'
    }, animatedStyle, style],
    children: /*#__PURE__*/_jsxs(Svg, {
      viewBox: "0 0 100 100",
      width: size,
      height: size,
      ...(className ? {
        className
      } : {}),
      children: [/*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0",
        rx: "5",
        ry: "5",
        transform: "rotate(-90 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.125",
        rx: "5",
        ry: "5",
        transform: "rotate(-45 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.25",
        rx: "5",
        ry: "5",
        transform: "rotate(0 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.375",
        rx: "5",
        ry: "5",
        transform: "rotate(45 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.5",
        rx: "5",
        ry: "5",
        transform: "rotate(90 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.625",
        rx: "5",
        ry: "5",
        transform: "rotate(135 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.75",
        rx: "5",
        ry: "5",
        transform: "rotate(180 50 50)",
        width: "28",
        x: "67",
        y: "45"
      }), /*#__PURE__*/_jsx(Rect, {
        fill: color,
        height: "10",
        opacity: "0.875",
        rx: "5",
        ry: "5",
        transform: "rotate(225 50 50)",
        width: "28",
        x: "67",
        y: "45"
      })]
    })
  });
};

/**
 * iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
 * Requires react-native-svg (lazy) and react-native-reanimated (static).
 * Falls back to ActivityIndicator if react-native-svg is missing.
 */
export const SpinnerIcon = ({
  color = 'currentColor',
  size = 26,
  className,
  style
}) => {
  const svg = getSvgModule();
  if (!svg) {
    return /*#__PURE__*/_jsx(ActivityIndicator, {
      size: size > 30 ? 'large' : 'small',
      color: color
    });
  }
  return /*#__PURE__*/_jsx(AnimatedSpinner, {
    color: color,
    size: size,
    className: className,
    style: style,
    svg: svg
  });
};
SpinnerIcon.displayName = 'SpinnerIcon';
//# sourceMappingURL=SpinnerIcon.js.map