/**
 * Loading 加载组件
 * 支持不同尺寸、全屏模式
 */

import React, { useMemo } from 'react';
import { View, ActivityIndicator, StyleSheet, ViewStyle } from 'react-native';
import { useAppColors, type AppColors } from '../../theme';

type LoadingSize = 'sm' | 'md' | 'lg';

interface LoadingProps {
  size?: LoadingSize;
  color?: string;
  fullScreen?: boolean;
  style?: ViewStyle;
}

function createLoadingStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      padding: 20,
      alignItems: 'center',
      justifyContent: 'center',
    },
    fullScreen: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.background.default,
    },
  });
}

const Loading: React.FC<LoadingProps> = ({
  size = 'md',
  color,
  fullScreen = false,
  style,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createLoadingStyles(colors), [colors]);
  const indicatorColor = color ?? colors.primary.main;

  const getSize = (): 'small' | 'large' | undefined => {
    switch (size) {
      case 'sm':
        return 'small';
      case 'lg':
        return 'large';
      default:
        return undefined;
    }
  };

  if (fullScreen) {
    return (
      <View style={[styles.fullScreen, style]}>
        <ActivityIndicator size={getSize()} color={indicatorColor} />
      </View>
    );
  }

  return (
    <View style={[styles.container, style]}>
      <ActivityIndicator size={getSize()} color={indicatorColor} />
    </View>
  );
};

export default Loading;
