physical-expo/components/selection-modal.tsx

import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import React from "react";
import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

interface SelectionOption {
  id: number | string;
  label: string;
  value: any;
  icon?: string; // 图标名称
}

// 运动名称到图标的映射
const getSportIcon = (label: string, icon?: string): string => {
  // 如果提供了 icon 字段，尝试直接使用
  if (icon) {
    // 如果 icon 已经是 Ionicons 格式，直接返回
    if (icon.includes("-")) {
      return icon;
    }
  }

  // 根据运动名称映射图标
  const labelLower = label.toLowerCase();
  if (labelLower.includes("足球") || labelLower.includes("football") || labelLower.includes("soccer")) {
    return "football-outline";
  }
  if (labelLower.includes("篮球") || labelLower.includes("basketball")) {
    return "basketball-outline";
  }
  if (labelLower.includes("板球") || labelLower.includes("cricket")) {
    return "baseball-outline";
  }
  if (labelLower.includes("网球") || labelLower.includes("tennis")) {
    return "tennisball-outline";
  }
  if (labelLower.includes("棒球") || labelLower.includes("baseball")) {
    return "baseball-outline";
  }
  if (labelLower.includes("羽毛球") || labelLower.includes("badminton")) {
    return "ellipse-outline";
  }
  if (labelLower.includes("斯诺克") || labelLower.includes("snooker")) {
    return "radio-button-on-outline";
  }
  
  // 默认图标
  return "ellipse-outline";
};

interface SelectionModalProps {
  visible: boolean;
  onClose: () => void;
  title: string;
  options: SelectionOption[];
  onSelect: (value: any) => void;
  selectedValue: any;
}

export function SelectionModal({
  visible,
  onClose,
  title,
  options,
  onSelect,
  selectedValue,
}: SelectionModalProps) {
  const { theme } = useTheme();
  const isDark = theme === "dark";
  const bg = isDark ? "#1C1C1E" : "#FFFFFF";
  const text = isDark ? "#FFFFFF" : "#000000";

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
    >
      <Pressable style={styles.overlay} onPress={onClose}>
        <View />
      </Pressable>

      <View style={[styles.sheet, { backgroundColor: bg }]}>
        <SafeAreaView edges={["bottom"]}>
          <View style={styles.header}>
            <ThemedText type="subtitle" style={styles.title}>
              {title}
            </ThemedText>
            <Pressable onPress={onClose} style={styles.closeButton}>
              <IconSymbol name="close" size={24} color={text} />
            </Pressable>
          </View>
          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
            {options.map((opt) => {
              const isSelected = selectedValue === opt.value;
              const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
              const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";

              return (
                <Pressable
                  key={opt.id}
                  style={[
                    styles.option,
                    { backgroundColor: optionBg },
                  ]}
                  onPress={() => {
                    onSelect(opt.value);
                    onClose();
                  }}
                >
                  {/* 左侧图标 */}
                  <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
                    <IconSymbol
                      name={getSportIcon(opt.label, opt.icon) as any}
                      size={24}
                      color={isSelected ? Colors.light.tint : text}
                    />
                  </View>

                  {/* 中间内容 */}
                  <View style={styles.content}>
                    <ThemedText
                      style={[
                        styles.optionLabel,
                        { fontWeight: isSelected ? "600" : "400" },
                      ]}
                    >
                      {opt.label}
                    </ThemedText>
                    <ThemedText style={styles.statusText}>
                      {isSelected ? "已选择" : "点击切换"}
                    </ThemedText>
                  </View>

                  {/* 右侧指示点 */}
                  <View
                    style={[
                      styles.indicator,
                      {
                        backgroundColor: isSelected
                          ? Colors.light.tint
                          : isDark
                            ? "#666666"
                            : "#CCCCCC",
                      },
                    ]}
                  />
                </Pressable>
              );
            })}
          </ScrollView>
        </SafeAreaView>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  sheet: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
    maxHeight: "70%",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
  },
  closeButton: {
    width: 32,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
  },
  scrollView: {
    maxHeight: 400,
  },
  option: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: "center",
    justifyContent: "center",
    marginRight: 12,
  },
  iconPlaceholder: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: "#999",
  },
  content: {
    flex: 1,
  },
  optionLabel: {
    fontSize: 16,
    marginBottom: 4,
  },
  statusText: {
    fontSize: 12,
    opacity: 0.6,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginLeft: 12,
  },
});