// Fallback for using MaterialIcons on Android and web.

import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
import { ComponentProps } from 'react';
import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';

type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
type IconSymbolName = keyof typeof MAPPING;

/**
 * Add your SF Symbols to Material Icons mappings here.
 * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
 * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
 */
const MAPPING = {
  'house.fill': 'home',
  'book.fill': 'menu-book',
  'paperplane.fill': 'send',
  'chevron.left.forwardslash.chevron.right': 'code',
  'chevron.right': 'chevron-right',
  'chevron.left': 'chevron-left',
  'doc.text.image': 'description',
  'bolt.circle.fill': 'flash-on',
  'leaf.fill': 'eco',
  'square.grid.2x2.fill': 'grid-view',
  'leaf.circle.fill': 'eco',
  'eye.fill': 'visibility',
  'checklist': 'checklist',
  'clock.fill': 'schedule',
  'basket.fill': 'shopping-basket',
  'cart.fill': 'shopping-cart',
  'creditcard.fill': 'credit-card',
  'map.fill': 'map',
  'sparkles': 'auto-awesome',
  'tray.full.fill': 'inventory',
  'dollarsign.circle.fill': 'paid',
  'person.crop.circle': 'person',
  'plus.circle.fill': 'add-circle',
  'photo.on.rectangle.angled': 'photo-library',
  'photo': 'photo',
} as IconMapping;

/**
 * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
 * This ensures a consistent look across platforms, and optimal resource usage.
 * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
 */
export function IconSymbol({
  name,
  size = 24,
  color,
  style,
}: {
  name: IconSymbolName;
  size?: number;
  color: string | OpaqueColorValue;
  style?: StyleProp<TextStyle>;
  weight?: SymbolWeight;
}) {
  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
}