"use strict";

import React, { memo, useEffect, useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { useTheme } from "../theme/use-theme.js";
import { animation } from "../styles/tokens.js";
import { SpinnerIcon } from './SpinnerIcon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 = 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__*/_jsxs(View, {
    style: [styles.container, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/_jsx(SpinnerIcon, {
      size: effectiveIconSize,
      color: spinnerColor,
      className: className
    }), showText && text && /*#__PURE__*/_jsx(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 = 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 = useSharedValue(showLoading ? targetHeight : 0);
  const opacity = useSharedValue(showLoading ? 1 : 0);
  const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
  useEffect(() => {
    const timingConfig = {
      duration: animation.duration.slow,
      easing: Easing.out(Easing.cubic)
    };
    height.value = withTiming(showLoading ? targetHeight : 0, timingConfig);
    opacity.value = withTiming(showLoading ? 1 : 0, timingConfig);
    translateY.value = 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 = useAnimatedStyle(() => ({
    height: height.value
  }));
  const innerAnimated = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{
      translateY: translateY.value
    }]
  }));
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.topContainer, containerAnimated],
    testID: testID,
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.topLoadingView, {
        height: targetHeight
      }, innerAnimated, style],
      children: spinnerIcon ?? /*#__PURE__*/_jsx(SpinnerIcon, {
        size: effectiveIconSize,
        color: spinnerColor
      })
    })
  });
};
const SkeletonLoading = ({
  lines = 3,
  width = '100%',
  lineHeight = 16,
  style,
  testID
}) => {
  const theme = useTheme();
  const skeletonColor = theme.colors.backgroundSecondary;
  const skeletonLines = useMemo(() => Array.from({
    length: lines
  }, (_, index) => /*#__PURE__*/_jsx(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__*/_jsx(View, {
    style: [styles.skeletonContainer, style],
    testID: testID,
    children: skeletonLines
  });
};
const InlineLoading = ({
  size = 'small',
  color,
  text,
  style,
  textStyle,
  spinnerIcon,
  testID
}) => {
  const theme = useTheme();
  const sizeConfig = SIZE_CONFIG[size];
  const spinnerColor = color ?? theme.colors.primary;
  const textColor = theme.colors.textSecondary;
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.inlineContainer, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/_jsx(SpinnerIcon, {
      size: SIZE_CONFIG.small.spinner,
      color: spinnerColor
    }), text && /*#__PURE__*/_jsx(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__*/_jsx(TopLoading, {
        ...props
      });
    case 'skeleton':
      return /*#__PURE__*/_jsx(SkeletonLoading, {
        ...props
      });
    case 'inline':
      return /*#__PURE__*/_jsx(InlineLoading, {
        ...props
      });
    case 'spinner':
    default:
      return /*#__PURE__*/_jsx(SpinnerLoading, {
        ...props
      });
  }
};
export const Loading = /*#__PURE__*/memo(LoadingComponent);
Loading.displayName = 'Loading';
const styles = 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