Helper Functions

/**
 * Returns the appropriate vector icon component for given icon type
 * @param type - Icon family identifier
 * @returns Vector icon component class
 */
function getIconType(type: IconType): React.ComponentType<any>;

/**
 * Registers custom icon families for use with Icon component
 * @param id - Unique identifier for the icon family
 * @param customIcon - Icon component class
 */
function registerCustomIconType(id: string, customIcon: any): void;

/**
 * Supported icon family types
 */
type IconType = 
  | 'material'
  | 'material-community'
  | 'simple-line-icon'
  | 'zocial'
  | 'font-awesome'
  | 'octicon'
  | 'ionicon'
  | 'foundation'
  | 'evilicon'
  | 'entypo'
  | 'antdesign'
  | 'font-awesome-5'
  | 'feather'
  | 'fontisto';

import { 
  getIconType, 
  registerCustomIconType,
  Icon 
} from 'react-native-elements';

// Get icon component for a specific type
const MaterialIcons = getIconType('material');
const FontAwesome = getIconType('font-awesome');

// Register custom icon family
import CustomIconSet from './CustomIconSet';

registerCustomIconType('custom-icons', CustomIconSet);

// Now you can use custom icons
<Icon
  name="custom-home"
  type="custom-icons"
  size={24}
  color="#007AFF"
/>

// Register multiple custom icon sets
import BusinessIcons from './BusinessIcons';
import WeatherIcons from './WeatherIcons';

registerCustomIconType('business', BusinessIcons);
registerCustomIconType('weather', WeatherIcons);

// Use registered custom icons
<View>
  <Icon name="chart" type="business" size={30} />
  <Icon name="sunny" type="weather" size={30} />
  <Icon name="building" type="business" size={30} />
</View>

// Dynamic icon type selection
function DynamicIcon({ iconFamily, iconName, ...props }) {
  const IconComponent = getIconType(iconFamily);
  
  return (
    <IconComponent
      name={iconName}
      {...props}
    />
  );
}

<DynamicIcon
  iconFamily="material-community"
  iconName="account-circle"
  size={40}
  color="#4caf50"
/>

// Validate icon type before use
function SafeIcon({ type, ...props }) {
  try {
    const IconComponent = getIconType(type);
    return <IconComponent {...props} />;
  } catch (error) {
    console.warn(`Icon type "${type}" not found, using default`);
    return <Icon type="material" name="help" {...props} />;
  }
}

/**
 * Responsive text scaling function using react-native-size-matters
 * @param size - Base font size
 * @param factor - Scaling factor (default: 0.25)
 * @returns Scaled size number based on device dimensions
 */
function normalize(size: number, factor?: number): number;

import { normalize } from 'react-native-elements';
import { Text, StyleSheet } from 'react-native';

// Basic text normalization
const styles = StyleSheet.create({
  title: {
    fontSize: normalize(24),
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: normalize(18),
  },
  body: {
    fontSize: normalize(14),
  },
  caption: {
    fontSize: normalize(12),
  },
});

function ResponsiveText() {
  return (
    <View>
      <Text style={styles.title}>Large Title</Text>
      <Text style={styles.subtitle}>Subtitle Text</Text>
      <Text style={styles.body}>Body text content</Text>
      <Text style={styles.caption}>Small caption</Text>
    </View>
  );
}

// Custom scaling factor
const customStyles = StyleSheet.create({
  extraLargeTitle: {
    fontSize: normalize(32, 0.3), // More aggressive scaling
  },
  subtleTitle: {
    fontSize: normalize(20, 0.1), // Less aggressive scaling
  },
});

// Dynamic text scaling based on content importance
function AdaptiveText({ children, importance = 'normal', ...props }) {
  const fontSize = {
    high: normalize(18, 0.3),
    normal: normalize(16, 0.25),
    low: normalize(14, 0.2),
  }[importance];
  
  return (
    <Text style={[{ fontSize }, props.style]} {...props}>
      {children}
    </Text>
  );
}

<View>
  <AdaptiveText importance="high">Important Message</AdaptiveText>
  <AdaptiveText importance="normal">Regular Content</AdaptiveText>
  <AdaptiveText importance="low">Fine Print</AdaptiveText>
</View>

// Responsive button text
function ResponsiveButton({ title, ...props }) {
  return (
    <Button
      title={title}
      titleStyle={{
        fontSize: normalize(16),
        fontWeight: 'bold',
      }}
      {...props}
    />
  );
}

// Create a responsive text component
function createResponsiveText(baseSize, scaleFactor = 0.25) {
  return function ResponsiveTextComponent({ children, style, ...props }) {
    return (
      <Text
        style={[
          { fontSize: normalize(baseSize, scaleFactor) },
          style
        ]}
        {...props}
      >
        {children}
      </Text>
    );
  };
}

const H1 = createResponsiveText(32, 0.3);
const H2 = createResponsiveText(28, 0.3);
const H3 = createResponsiveText(24, 0.25);
const Body = createResponsiveText(16, 0.2);

<View>
  <H1>Main Heading</H1>
  <H2>Sub Heading</H2>
  <H3>Section Title</H3>
  <Body>Body content text</Body>
</View>

/**
 * Higher-order component that adds badge overlay to any component
 * @param badgeProps - Badge configuration properties
 * @returns HOC function that wraps components with badge functionality
 */
function withBadge<P>(
  badgeProps?: Partial<BadgeProps>
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;

/**
 * Badge properties for withBadge HOC
 */
interface BadgeProps {
  /** Badge content */
  value?: React.ReactNode;
  /** Badge status type */
  status?: 'primary' | 'success' | 'warning' | 'error';
  /** Badge container styles */
  badgeStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Text styles */
  textStyle?: StyleProp<TextStyle>;
}

import { withBadge, Icon, Avatar, Button } from 'react-native-elements';

// Basic badge enhancement
const BadgedIcon = withBadge({
  value: 5,
  status: 'error',
})(Icon);

<BadgedIcon
  name="notifications"
  type="material"
  color="#666"
  size={30}
/>

// Dynamic badge values
const BadgedAvatar = withBadge({
  value: notificationCount,
  status: 'primary',
  badgeStyle: { right: -6, top: -3 },
})(Avatar);

<BadgedAvatar
  source={{ uri: 'https://example.com/avatar.jpg' }}
  size="medium"
  rounded
/>

// Conditional badge display
const ConditionalBadge = withBadge({
  value: hasUnreadMessages ? '!' : null,
  status: 'error',
})(Button);

<ConditionalBadge
  title="Messages"
  icon={{ name: 'mail', color: '#fff' }}
  onPress={openMessages}
/>

// Custom badge styling
const CustomBadgedComponent = withBadge({
  value: '99+',
  badgeStyle: {
    backgroundColor: '#FF6B6B',
    borderRadius: 12,
    height: 24,
    minWidth: 24,
    right: -8,
    top: -8,
  },
  textStyle: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
})(View);

<CustomBadgedComponent style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
  <Icon name="shopping-cart" size={40} />
</CustomBadgedComponent>

// Badge with icon content
const IconBadged = withBadge({
  value: <Icon name="check" size={12} color="#fff" />,
  status: 'success',
  badgeStyle: { right: 0, top: 0 },
})(Avatar);

<IconBadged
  title="JD"
  size="large"
  rounded
  containerStyle={{ backgroundColor: '#007AFF' }}
/>

// Multiple badges (nested withBadge)
const DoubleBadged = withBadge({
  value: 'VIP',
  status: 'warning',
  badgeStyle: { right: -10, bottom: -5 },
})(withBadge({
  value: 3,
  status: 'error',
  badgeStyle: { right: -5, top: -5 },
})(Avatar));

<DoubleBadged
  source={{ uri: 'https://example.com/vip-user.jpg' }}
  size="large"
  rounded
/>

// Create reusable badged components
function createBadgedComponent(Component, defaultBadgeProps = {}) {
  return function BadgedWrapper({ badge, ...props }) {
    if (!badge) return <Component {...props} />;
    
    const BadgedComponent = withBadge({
      ...defaultBadgeProps,
      ...badge,
    })(Component);
    
    return <BadgedComponent {...props} />;
  };
}

const FlexibleBadgedIcon = createBadgedComponent(Icon, {
  status: 'error',
  badgeStyle: { right: -6, top: -6 },
});

<FlexibleBadgedIcon
  name="home"
  badge={{ value: 2 }}
  size={30}
/>

/**
 * Rating components wrapped from react-native-ratings
 * Enhanced with theme support through withTheme HOC
 */

/**
 * Basic tap-to-rate component with theme integration
 */
interface RatingProps {
  /** Rating type */
  type?: 'star' | 'rocket' | 'bell' | 'heart';
  /** Current rating value */
  rating?: number;
  /** Number of rating items */
  count?: number;
  /** Rating change handler */
  onFinishRating?(rating: number): void;
  /** Show rating value */
  showRating?: boolean;
  /** Custom rating image */
  ratingImage?: any;
  /** Rating color */
  ratingColor?: string;
  /** Empty rating color */
  ratingBackgroundColor?: string;
  /** Size of rating items */
  imageSize?: number;
  /** Readonly state */
  readonly?: boolean;
  /** Start from value */
  startingValue?: number;
  /** Fraction digits */
  fractions?: number;
  /** Minimum value */
  minValue?: number;
  /** Jump to rating on tap */
  jumpValue?: number;
  /** Tap rating style */
  style?: StyleProp<ViewStyle>;
}

/**
 * Swipe-based rating with Airbnb styling and theme integration
 */
interface AirbnbRatingProps {
  /** Default rating */
  defaultRating?: number;
  /** Review array */
  reviews?: string[];
  /** Number of stars */
  count?: number;
  /** Selected color */
  selectedColor?: string;
  /** Review color */
  reviewColor?: string;
  /** Review size */
  reviewSize?: number;
  /** Show review */
  showReview?: boolean;
  /** Rating change handler */
  onFinishRating?(rating: number): void;
  /** Star size */
  size?: number;
  /** Star color */
  starColor?: string;
  /** Unselected color */
  unSelectedColor?: string;
}

import { Rating, AirbnbRating } from 'react-native-elements';

// Basic rating component
<Rating
  showRating
  onFinishRating={handleRating}
  style={{ paddingVertical: 10 }}
/>

// Custom styled rating
<Rating
  type="star"
  ratingCount={5}
  imageSize={30}
  showRating
  startingValue={3.5}
  fractions={1}
  ratingColor="#FFD700"
  ratingBackgroundColor="#E0E0E0"
  onFinishRating={(rating) => {
    console.log('Rating is: ' + rating);
    setUserRating(rating);
  }}
  style={{ paddingVertical: 20 }}
/>

// Airbnb-style rating
<AirbnbRating
  count={5}
  reviews={['Terrible', 'Bad', 'OK', 'Good', 'Excellent']}
  defaultRating={3}
  size={30}
  onFinishRating={handleAirbnbRating}
/>

// Readonly rating display
<Rating
  readonly
  startingValue={4.2}
  imageSize={20}
  style={{ alignSelf: 'flex-start' }}
/>

// Custom heart rating
<Rating
  type="heart"
  ratingCount={5}
  imageSize={40}
  showRating
  onFinishRating={setHeartRating}
  style={{ paddingVertical: 15 }}
/>

// Themed rating with custom colors
function ThemedRating({ onRating }) {
  const { theme } = useTheme();
  
  return (
    <Rating
      showRating
      ratingColor={theme.colors.primary}
      ratingBackgroundColor={theme.colors.grey4}
      onFinishRating={onRating}
      style={{ paddingVertical: 10 }}
    />
  );
}

// Rating in product card
function ProductCard({ product }) {
  return (
    <Card>
      <Card.Title>{product.name}</Card.Title>
      <Card.Image source={{ uri: product.image }} />
      
      <View style={{ paddingHorizontal: 15, paddingBottom: 15 }}>
        <Rating
          readonly
          startingValue={product.rating}
          imageSize={16}
          style={{ alignSelf: 'flex-start', marginBottom: 10 }}
        />
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
          ${product.price}
        </Text>
      </View>
    </Card>
  );
}

// Interactive rating form
function RatingForm({ onSubmit }) {
  const [rating, setRating] = useState(0);
  const [review, setReview] = useState('');
  
  return (
    <View style={{ padding: 20 }}>
      <Text h4>Rate this product</Text>
      
      <AirbnbRating
        count={5}
        reviews={['Poor', 'Fair', 'Good', 'Very Good', 'Excellent']}
        defaultRating={0}
        size={40}
        showReview
        onFinishRating={setRating}
      />
      
      <Input
        placeholder="Write a review..."
        multiline
        value={review}
        onChangeText={setReview}
        containerStyle={{ marginTop: 20 }}
      />
      
      <Button
        title="Submit Review"
        onPress={() => onSubmit({ rating, review })}
        disabled={rating === 0}
        buttonStyle={{ marginTop: 20 }}
      />
    </View>
  );
}