/*
 * File: LoadingState.tsx
 * Description: Loading state component for AI predictions
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  Dimensions,
} from 'react-native';
import { theme } from '../../../theme';

// ============================================================================
// INTERFACES
// ============================================================================

interface LoadingStateProps {
  message?: string;
  showSpinner?: boolean;
  size?: 'small' | 'large';
  style?: any;
}

// ============================================================================
// CONSTANTS
// ============================================================================

const { width, height } = Dimensions.get('window');

// ============================================================================
// LOADING STATE COMPONENT
// ============================================================================

/**
 * LoadingState Component
 * 
 * Purpose: Display loading state for AI predictions
 * 
 * Features:
 * - Customizable loading message
 * - Optional spinner display
 * - Different spinner sizes
 * - Custom styling support
 * - Centered layout
 * - Accessibility support
 */
const LoadingState: React.FC<LoadingStateProps> = ({
  message = 'Loading AI predictions...',
  showSpinner = true,
  size = 'large',
  style,
}) => {
  // ============================================================================
  // RENDER
  // ============================================================================

  return (
    <View style={[styles.container, style]} accessibilityRole="progressbar">
      {/* Loading Spinner */}
      {showSpinner && (
        <ActivityIndicator
          size={size}
          color={theme.colors.primary}
          style={styles.spinner}
        />
      )}

      {/* Loading Message */}
      <Text style={styles.message} accessibilityLabel={message}>
        {message}
      </Text>

      {/* Loading Animation Dots */}
      <View style={styles.dotsContainer}>
        <View style={[styles.dot, styles.dot1]} />
        <View style={[styles.dot, styles.dot2]} />
        <View style={[styles.dot, styles.dot3]} />
      </View>
    </View>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.xl,
    paddingVertical: theme.spacing.xxl,
    minHeight: height * 0.3,
  },
  spinner: {
    marginBottom: theme.spacing.lg,
  },
  message: {
    fontSize: theme.typography.fontSize.bodyLarge,
    color: theme.colors.textSecondary,
    textAlign: 'center',
    fontWeight: theme.typography.fontWeight.medium,
    marginBottom: theme.spacing.xl,
  },
  dotsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.spacing.sm,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: theme.colors.primary,
  },
  dot1: {
    opacity: 0.3,
  },
  dot2: {
    opacity: 0.6,
  },
  dot3: {
    opacity: 1,
  },
});

export default LoadingState;

/*
 * End of File: LoadingState.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */