// 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<string, ComponentProps<typeof MaterialIcons>["name"]>;
type IconSymbolName = keyof typeof MAPPING;

/**
 * Mapeamento de ícones SF Symbols para Material Icons
 */
const MAPPING = {
  // Tab bar icons
  "house.fill": "home",
  "list.bullet": "list",
  "wrench.fill": "build",
  
  // Category icons
  "ac-unit": "ac-unit",
  "flash-on": "flash-on",
  "roofing": "roofing",
  "build": "build",
  "water-drop": "water-drop",
  "more-horiz": "more-horiz",
  
  // Status icons
  "check-circle": "check-circle",
  "pending": "pending",
  "engineering": "engineering",
  "cancel": "cancel",
  "search": "search",
  
  // Action icons
  "add": "add",
  "add-circle": "add-circle",
  "chevron-right": "chevron-right",
  "chevron.right": "chevron-right",
  "arrow-back": "arrow-back",
  "close": "close",
  "send": "send",
  "edit": "edit",
  "delete": "delete",
  "filter-list": "filter-list",
  
  // Priority icons
  "flag": "flag",
  "priority-high": "priority-high",
  
  // Misc icons
  "location-on": "location-on",
  "schedule": "schedule",
  "info": "info",
  "help": "help",
  "person": "person",
  "person.fill": "person",
  "notifications": "notifications",
  "mail": "mail",
  "work": "work",
  "business": "business",
  "logout": "logout",
  "camera": "photo-camera",
  "lock": "lock",
  
  // Legacy mappings
  "paperplane.fill": "send",
  "chevron.left.forwardslash.chevron.right": "code",
} 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;
}) {
  const iconName = MAPPING[name] || "help";
  return <MaterialIcons color={color} size={size} name={iconName} style={style} />;
}