304 lines
8.6 KiB
TypeScript
304 lines
8.6 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { Colors } from "@/constants/theme";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { addFavorite, removeFavorite } from "@/lib/api";
|
|
import { Match } from "@/types/api";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useState } from "react";
|
|
import { Image, Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
|
|
interface MatchCardLeagueProps {
|
|
match: Match;
|
|
onPress?: (match: Match) => void;
|
|
onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
|
|
}
|
|
|
|
const WINNER_BORDER = "#D4A84B";
|
|
const WINNER_BG_LIGHT = "#FFF8E7";
|
|
const WINNER_BG_DARK = "#3D3422";
|
|
const NEUTRAL_BG_LIGHT = "#F5F5F5";
|
|
const NEUTRAL_BG_DARK = "#2C2C2E";
|
|
const RED_CARD_COLOR = "#C53030";
|
|
const YELLOW_CARD_COLOR = "#F59E0B";
|
|
|
|
export function MatchCardLeague({
|
|
match,
|
|
onPress,
|
|
onFavoriteToggle,
|
|
}: MatchCardLeagueProps) {
|
|
const router = useRouter();
|
|
const { theme } = useTheme();
|
|
const [isFav, setIsFav] = useState(match.fav);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setIsFav(match.fav);
|
|
}, [match.fav]);
|
|
|
|
const isDark = theme === "dark";
|
|
const textColor = isDark ? Colors.dark.text : Colors.light.text;
|
|
const secondaryText = isDark ? "#8E8E93" : "#6B7280";
|
|
const scoreBorder = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.12)";
|
|
const scoreBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.6)";
|
|
|
|
const isLive = React.useMemo(() => {
|
|
return !!match.isLive;
|
|
}, [match.isLive]);
|
|
|
|
const handlePress = () => {
|
|
if (onPress) {
|
|
onPress(match);
|
|
} else {
|
|
router.push(`/match-detail/${match.id}`);
|
|
}
|
|
};
|
|
|
|
const toggleFavorite = async () => {
|
|
if (loading) return;
|
|
setLoading(true);
|
|
const newFavState = !isFav;
|
|
try {
|
|
if (newFavState) {
|
|
await addFavorite({
|
|
matchId: parseInt(match.id),
|
|
type: "match",
|
|
typeId: match.id,
|
|
notify: true,
|
|
});
|
|
} else {
|
|
await removeFavorite({
|
|
type: "match",
|
|
typeId: match.id,
|
|
});
|
|
}
|
|
setIsFav(newFavState);
|
|
if (onFavoriteToggle) {
|
|
onFavoriteToggle(match.id, newFavState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Toggle favorite error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const scoreParts = React.useMemo(() => {
|
|
const s = (match.scoreText || "").trim();
|
|
const m = s.match(/(\d+)\s*[-:]\s*(\d+)/);
|
|
if (m) return { home: m[1], away: m[2], hasScore: true };
|
|
if (s && s !== "-" && s !== "0 - 0")
|
|
return { home: s, away: "", hasScore: true };
|
|
if (s === "0 - 0") return { home: "0", away: "0", hasScore: true };
|
|
return { home: "", away: "", hasScore: false };
|
|
}, [match.scoreText]);
|
|
|
|
const { homeRedCards, awayRedCards, homeYellowCards, awayYellowCards } = React.useMemo(() => {
|
|
let homeRed = (match as any).homeRedCards || 0;
|
|
let awayRed = (match as any).awayRedCards || 0;
|
|
let homeYellow = (match as any).homeYellowCards || 0;
|
|
let awayYellow = (match as any).awayYellowCards || 0;
|
|
|
|
const matchStats = (match as any).stats;
|
|
if (matchStats) {
|
|
try {
|
|
const stats = typeof matchStats === 'string' ? JSON.parse(matchStats) : matchStats;
|
|
const redCardsStat = stats.find((s: any) => s.type === "Red Cards");
|
|
const yellowCardsStat = stats.find((s: any) => s.type === "Yellow Cards");
|
|
|
|
if (redCardsStat) {
|
|
homeRed = parseInt(redCardsStat.home) || 0;
|
|
awayRed = parseInt(redCardsStat.away) || 0;
|
|
}
|
|
if (yellowCardsStat) {
|
|
homeYellow = parseInt(yellowCardsStat.home) || 0;
|
|
awayYellow = parseInt(yellowCardsStat.away) || 0;
|
|
}
|
|
} catch (e) {
|
|
console.error("Parse stats error:", e);
|
|
}
|
|
}
|
|
|
|
return { homeRedCards: homeRed, awayRedCards: awayRed, homeYellowCards: homeYellow, awayYellowCards: awayYellow };
|
|
}, [(match as any).stats, (match as any).homeRedCards, (match as any).awayRedCards]);
|
|
|
|
const cardBg = isDark ? "#1C1C1E" : "#F5F5F5";
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.card,
|
|
{
|
|
backgroundColor: cardBg,
|
|
opacity: pressed ? 0.7 : 1
|
|
},
|
|
]}
|
|
>
|
|
<View style={styles.leftColumn}>
|
|
<ThemedText style={[styles.statusText, { color: secondaryText }]}>
|
|
{(match.time || "").toUpperCase()}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.teamsColumn}>
|
|
<View style={styles.teamRow}>
|
|
<Image
|
|
source={{ uri: (match as any).homeLogo || match.homeTeamLogo || "https://placehold.co/24x24/png" }}
|
|
style={styles.teamLogo}
|
|
/>
|
|
<View style={styles.teamNameContainer}>
|
|
<ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
|
|
{match.home || match.homeTeamName}
|
|
</ThemedText>
|
|
{homeYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
|
|
{homeRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.teamRow, { marginTop: 10 }]}>
|
|
<Image
|
|
source={{ uri: (match as any).awayLogo || match.awayTeamLogo || "https://placehold.co/24x24/png" }}
|
|
style={styles.teamLogo}
|
|
/>
|
|
<View style={styles.teamNameContainer}>
|
|
<ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
|
|
{match.away || match.awayTeamName}
|
|
</ThemedText>
|
|
{awayYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
|
|
{awayRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.rightWrapper}>
|
|
{scoreParts.hasScore ? (
|
|
<View
|
|
style={[
|
|
styles.scoreBox,
|
|
{
|
|
borderColor: isLive ? "#FF9500" : scoreBorder,
|
|
backgroundColor: scoreBg,
|
|
},
|
|
]}
|
|
>
|
|
<ThemedText style={styles.scoreBoxText} numberOfLines={1}>
|
|
{scoreParts.home}
|
|
</ThemedText>
|
|
<View style={[styles.scoreDivider, { backgroundColor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)" }]} />
|
|
<ThemedText style={styles.scoreBoxText} numberOfLines={1}>
|
|
{scoreParts.away}
|
|
</ThemedText>
|
|
</View>
|
|
) : (
|
|
<View style={styles.scoreBoxPlaceholder} />
|
|
)}
|
|
|
|
<TouchableOpacity
|
|
onPress={(e) => {
|
|
e.stopPropagation();
|
|
toggleFavorite();
|
|
}}
|
|
disabled={loading}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
style={styles.favoriteButton}
|
|
>
|
|
<IconSymbol
|
|
name={isFav ? "star" : "star-outline"}
|
|
size={20}
|
|
color={isFav ? "#FFD700" : (isDark ? "#545458" : "#9CA3AF")}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: "row",
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 16,
|
|
alignItems: "center",
|
|
borderRadius: 12,
|
|
marginBottom: 8,
|
|
},
|
|
leftColumn: {
|
|
width: 48,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginRight: 8,
|
|
},
|
|
statusText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
},
|
|
teamsColumn: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
paddingRight: 12,
|
|
},
|
|
teamRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
teamLogo: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 14,
|
|
marginRight: 12,
|
|
backgroundColor: "#E5E5E5",
|
|
},
|
|
teamNameContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
},
|
|
teamName: {
|
|
fontSize: 15,
|
|
fontWeight: "500",
|
|
},
|
|
cardBadge: {
|
|
width: 14,
|
|
height: 18,
|
|
borderRadius: 2,
|
|
marginLeft: 8,
|
|
},
|
|
redCard: {
|
|
backgroundColor: RED_CARD_COLOR,
|
|
},
|
|
yellowCard: {
|
|
backgroundColor: YELLOW_CARD_COLOR,
|
|
},
|
|
rightWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
},
|
|
scoreBox: {
|
|
width: 36,
|
|
height: 54,
|
|
borderRadius: 8,
|
|
borderWidth: 1.5,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
scoreBoxText: {
|
|
fontSize: 20,
|
|
fontWeight: "900",
|
|
},
|
|
scoreDivider: {
|
|
width: "60%",
|
|
height: 1,
|
|
marginVertical: 1,
|
|
},
|
|
scoreBoxPlaceholder: {
|
|
width: 36,
|
|
height: 54,
|
|
},
|
|
favoriteButton: {
|
|
padding: 4,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}
|
|
}); |