"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Loading = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _useTheme = require("../theme/use-theme.js");
var _tokens = require("../styles/tokens.js");
var _SpinnerIcon = require("./SpinnerIcon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SIZE_CONFIG = {
  small: {
    spinner: 20,
    text: 13
  },
  medium: {
    spinner: 24,
    text: 15
  },
  large: {
    spinner: 44,
    text: 16
  }
};
const SpinnerLoading = ({
  size = 'medium',
  color,
  className,
  text,
  textStyle,
  style,
  showText = true,
  iconSize,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
  const spinnerColor = className ? 'currentColor' : color ?? theme.colors.primary;
  const textColor = color ?? theme.colors.textSecondary;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.container, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIcon.SpinnerIcon, {
      size: effectiveIconSize,
      color: spinnerColor,
      className: className
    }), showText && text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.text, {
        color: textColor,
        fontSize: sizeConfig.text,
        marginTop: 8
      }, textStyle],
      children: text
    })]
  });
};
const TopLoading = ({
  size = 'medium',
  color,
  style,
  showLoading = true,
  iconSize,
  heightOffset = 0,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
  const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
  const spinnerColor = color ?? theme.colors.primary;
  const height = (0, _reactNativeReanimated.useSharedValue)(showLoading ? targetHeight : 0);
  const opacity = (0, _reactNativeReanimated.useSharedValue)(showLoading ? 1 : 0);
  const translateY = (0, _reactNativeReanimated.useSharedValue)(showLoading ? 0 : -targetHeight);
  (0, _react.useEffect)(() => {
    const timingConfig = {
      duration: _tokens.animation.duration.slow,
      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
    };
    height.value = (0, _reactNativeReanimated.withTiming)(showLoading ? targetHeight : 0, timingConfig);
    opacity.value = (0, _reactNativeReanimated.withTiming)(showLoading ? 1 : 0, timingConfig);
    translateY.value = (0, _reactNativeReanimated.withTiming)(showLoading ? 0 : -targetHeight, timingConfig);
    // Easing, withTiming: module-level constants from a static import, stable.
    // height/opacity/translateY: shared value objects, stable references.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showLoading, targetHeight]);
  const containerAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    height: height.value
  }));
  const innerAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    opacity: opacity.value,
    transform: [{
      translateY: translateY.value
    }]
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    style: [styles.topContainer, containerAnimated],
    testID: testID,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: [styles.topLoadingView, {
        height: targetHeight
      }, innerAnimated, style],
      children: spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIcon.SpinnerIcon, {
        size: effectiveIconSize,
        color: spinnerColor
      })
    })
  });
};
const SkeletonLoading = ({
  lines = 3,
  width = '100%',
  lineHeight = 16,
  style,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const skeletonColor = theme.colors.backgroundSecondary;
  const skeletonLines = (0, _react.useMemo)(() => Array.from({
    length: lines
  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.skeletonLine, {
      width: typeof width === 'string' ? width : `${width}%`,
      height: lineHeight,
      backgroundColor: skeletonColor,
      marginBottom: index < lines - 1 ? 8 : 0
    }]
  }, index)), [lines, width, lineHeight, skeletonColor]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.skeletonContainer, style],
    testID: testID,
    children: skeletonLines
  });
};
const InlineLoading = ({
  size = 'small',
  color,
  text,
  style,
  textStyle,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const spinnerColor = color ?? theme.colors.primary;
  const textColor = theme.colors.textSecondary;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.inlineContainer, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIcon.SpinnerIcon, {
      size: SIZE_CONFIG.small.spinner,
      color: spinnerColor
    }), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [{
        color: textColor,
        fontSize: sizeConfig.text,
        marginLeft: 8
      }, textStyle],
      children: text
    })]
  });
};
const LoadingComponent = props => {
  const variant = props.variant ?? 'spinner';
  switch (variant) {
    case 'top':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TopLoading, {
        ...props
      });
    case 'skeleton':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonLoading, {
        ...props
      });
    case 'inline':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineLoading, {
        ...props
      });
    case 'spinner':
    default:
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerLoading, {
        ...props
      });
  }
};
const Loading = exports.Loading = /*#__PURE__*/(0, _react.memo)(LoadingComponent);
Loading.displayName = 'Loading';
const styles = _reactNative.StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16
  },
  text: {
    textAlign: 'center'
  },
  topContainer: {
    width: '100%',
    position: 'relative',
    overflow: 'hidden'
  },
  topLoadingView: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0
  },
  skeletonContainer: {
    width: '100%'
  },
  skeletonLine: {
    borderRadius: 4
  },
  inlineContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Loading.js.map