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

import React from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  StyleSheet,
} from 'react-native';
import { theme } from '../../../theme/theme';
import Icon from 'react-native-vector-icons/Feather';

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

interface LoadingStateProps {
  title?: string;
  subtitle?: string;
  showIcon?: boolean;
  iconName?: string;
  size?: 'small' | 'large';
}

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

/**
 * LoadingState Component
 * 
 * Purpose: Display loading state during data fetching
 * 
 * Features:
 * - Customizable loading messages
 * - Optional icon display
 * - Different sizes (small/large)
 * - Centered layout with spinner
 * - Medical-themed design
 */
const LoadingState: React.FC<LoadingStateProps> = ({
  title = 'Loading...',
  subtitle = 'Please wait while we fetch the data',
  showIcon = true,
  iconName = 'loader',
  size = 'large',
}) => {
  // ============================================================================
  // RENDER HELPERS
  // ============================================================================

  /**
   * Render Large Loading State
   * 
   * Purpose: Render full-screen loading state
   */
  const renderLargeState = () => (
    <View style={styles.container}>
      {/* Loading Animation */}
      <View style={styles.loadingContainer}>
        {showIcon && (
          <View style={styles.iconContainer}>
            <Icon
              name={iconName}
              size={32}
              color={theme.colors.primary}
            />
          </View>
        )}
        <ActivityIndicator
          size="large"
          color={theme.colors.primary}
          style={styles.spinner}
        />
      </View>

      {/* Loading Text */}
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );

  /**
   * Render Small Loading State
   * 
   * Purpose: Render compact loading state
   */
  const renderSmallState = () => (
    <View style={styles.smallContainer}>
      <ActivityIndicator
        size="small"
        color={theme.colors.primary}
        style={styles.smallSpinner}
      />
      <Text style={styles.smallText}>{title}</Text>
    </View>
  );

  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return size === 'large' ? renderLargeState() : renderSmallState();
};

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

const styles = StyleSheet.create({
  // Large Loading State
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.xl,
    paddingVertical: theme.spacing.xxl,
    backgroundColor: theme.colors.background,
  },
  loadingContainer: {
    position: 'relative',
    marginBottom: theme.spacing.lg,
  },
  iconContainer: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -16,
    marginLeft: -16,
    zIndex: 1,
  },
  spinner: {
    transform: [{ scale: 1.5 }],
  },
  title: {
    fontSize: 20,
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
    textAlign: 'center',
    marginBottom: theme.spacing.sm,
  },
  subtitle: {
    fontSize: 16,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
    textAlign: 'center',
    lineHeight: 24,
  },
  
  // Small Loading State
  smallContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: theme.spacing.md,
  },
  smallSpinner: {
    marginRight: theme.spacing.sm,
  },
  smallText: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
  },
});

export default LoadingState;

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