be-components 7.5.6 → 7.5.7

package/src/BetRouter/components/admin/LeagueInfo.tsx

@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, Button } from "../../../Components/Themed";
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, Modal, ScrollView, TouchableOpacity } from 'react-native';
 import { useColors } from '../../../constants/useColors';
 import { getPartners, getContests, getParticipants } from '../../api';
 import { BetRouterApi } from '../../api';
+import { SearchBox } from '../../../Components';
+import Pagination from '../../../Components/Pagination';
 import type {
     RouterLeagueProps,
     RouterPartnerProps,
     RouterContestProps,
     RouterParticipantProps,
     //PartnerContestProps,
-    PartnerLeagueProps
+    PartnerLeagueProps,
+    RawLeagueProps
 } from '../../types';
 
 type LeagueInfoProps = {
@@ -23,8 +26,15 @@ const LeagueInfo = ({ league }: LeagueInfoProps) => {
     const [loading, setLoading] = useState(true);
     const [partners, setPartners] = useState<RouterPartnerProps[]>([]);
     const [partnerLeagues, setPartnerLeagues] = useState<PartnerLeagueProps[]>([]);
+    const [rawLeagues, setRawLeagues] = useState<RawLeagueProps[]>([]);
     const [contests, setContests] = useState<RouterContestProps[]>([]);
     const [participants, setParticipants] = useState<RouterParticipantProps[]>([]);
+    const [showLinkModal, setShowLinkModal] = useState(false);
+    const [selectedPartner, setSelectedPartner] = useState<RouterPartnerProps | null>(null);
+    const [selectedRawLeagues, setSelectedRawLeagues] = useState<string[]>([]);
+    const [linkModalSearch, setLinkModalSearch] = useState('');
+    const [linkModalPage, setLinkModalPage] = useState(0);
+    const ITEMS_PER_PAGE = 10;
 
     useEffect(() => {
         loadLeagueData();
@@ -52,6 +62,11 @@ const LeagueInfo = ({ league }: LeagueInfoProps) => {
                 setPartnerLeagues(filteredPartnerLeagues);
             }
 
+            // Store raw leagues
+            if (leaguesDataRes && leaguesDataRes.raw_leagues) {
+                setRawLeagues(leaguesDataRes.raw_leagues);
+            }
+
             if (Array.isArray(contestsRes)) {
                 setContests(contestsRes.filter(c => c.router_league_id === league.router_league_id));
             }
@@ -77,6 +92,48 @@ const LeagueInfo = ({ league }: LeagueInfoProps) => {
         }
     };
 
+    const openLinkModal = (partner: RouterPartnerProps) => {
+        setSelectedPartner(partner);
+        setShowLinkModal(true);
+        setSelectedRawLeagues([]);
+        setLinkModalSearch('');
+        setLinkModalPage(0);
+    };
+
+    const handleLinkLeagues = async () => {
+        if (!selectedPartner || selectedRawLeagues.length === 0) {
+            alert('Please select at least one league to link');
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const result = await BetRouterApi.BetRouter.LeagueApi.linkLeague(
+                selectedRawLeagues,
+                league.router_league_id
+            );
+            alert(`Successfully linked ${result.partnerLeagues.length} league(s) for ${selectedPartner.name}`);
+            setShowLinkModal(false);
+            setSelectedRawLeagues([]);
+            // Reload to show updated counts
+            await loadLeagueData();
+        } catch (error) {
+            console.error('Failed to link leagues:', error);
+            alert('Error linking leagues: ' + (error as any).message);
+            setLoading(false);
+        }
+    };
+
+    const toggleRawLeagueSelection = (rawLeagueId: string) => {
+        setSelectedRawLeagues(prev => {
+            if (prev.includes(rawLeagueId)) {
+                return prev.filter(id => id !== rawLeagueId);
+            } else {
+                return [...prev, rawLeagueId];
+            }
+        });
+    };
+
     if (loading) {
         return (
             <View transparent style={{ padding: 40, alignItems: 'center' }}>
@@ -204,7 +261,7 @@ const LeagueInfo = ({ league }: LeagueInfoProps) => {
                                     <Button
                                         type='action'
                                         title='Link'
-                                        onPress={() => alert(`Link raw leagues for ${partner.name} - Coming soon!`)}
+                                        onPress={() => openLinkModal(partner)}
                                         style={{ paddingHorizontal: 12, paddingVertical: 6 }}
                                     />
                                 </View>
@@ -246,6 +303,177 @@ const LeagueInfo = ({ league }: LeagueInfoProps) => {
                     </View>
                 </View>
             </View>
+
+            {/* Link Leagues Modal */}
+            <Modal
+                visible={showLinkModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => setShowLinkModal(false)}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View style={{ backgroundColor: Colors.views.body, borderRadius: 12, padding: 24, width: '90%', maxWidth: 600 }}>
+                        <Text theme="h1" size={20} style={{ marginBottom: 12 }}>
+                            Link Leagues - {selectedPartner?.name}
+                        </Text>
+                        <Text theme="description" size={14} style={{ marginBottom: 16 }}>
+                            Select raw leagues from {selectedPartner?.name} to link to {league.name}
+                        </Text>
+
+                        {/* Search Box */}
+                        <View transparent style={{ marginBottom: 16 }}>
+                            <SearchBox
+                                placeholder="Search leagues..."
+                                onChange={(text) => {
+                                    setLinkModalSearch(text);
+                                    setLinkModalPage(0); // Reset to first page on search
+                                }}
+                                hide_search_button
+                            />
+                        </View>
+
+                        {(() => {
+                            // Filter raw leagues by selected partner
+                            let partnerRawLeagues = rawLeagues.filter(rl => rl.partner_id === selectedPartner?.partner_id);
+
+                            // Apply search filter
+                            if (linkModalSearch) {
+                                partnerRawLeagues = partnerRawLeagues.filter(rl =>
+                                    rl.name.toLowerCase().includes(linkModalSearch.toLowerCase()) ||
+                                    rl.external_id.toLowerCase().includes(linkModalSearch.toLowerCase())
+                                );
+                            }
+
+                            if (partnerRawLeagues.length === 0) {
+                                return (
+                                    <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                                        <Text theme="description" size={14}>
+                                            {linkModalSearch
+                                                ? `No leagues found matching "${linkModalSearch}"`
+                                                : `No raw leagues found for ${selectedPartner?.name}. Try loading raw leagues first from the partner.`
+                                            }
+                                        </Text>
+                                    </View>
+                                );
+                            }
+
+                            // Calculate pagination
+                            const totalPages = Math.ceil(partnerRawLeagues.length / ITEMS_PER_PAGE);
+                            const startIndex = linkModalPage * ITEMS_PER_PAGE;
+                            const endIndex = startIndex + ITEMS_PER_PAGE;
+                            const paginatedLeagues = partnerRawLeagues.slice(startIndex, endIndex);
+
+                            return (
+                                <>
+                                    <ScrollView style={{ maxHeight: 400 }}>
+                                        <View transparent style={{ gap: 8 }}>
+                                            {paginatedLeagues.map((rawLeague) => {
+                                        const isSelected = selectedRawLeagues.includes(rawLeague.raw_league_id);
+                                        const isAlreadyLinked = partnerLeagues.some(
+                                            pl => pl.raw_league_id === rawLeague.raw_league_id && pl.router_league_id === league.router_league_id
+                                        );
+
+                                        return (
+                                            <TouchableOpacity
+                                                key={rawLeague.raw_league_id}
+                                                onPress={() => !isAlreadyLinked && toggleRawLeagueSelection(rawLeague.raw_league_id)}
+                                                disabled={isAlreadyLinked}
+                                                style={{
+                                                    padding: 12,
+                                                    backgroundColor: isAlreadyLinked ? Colors.views.header : (isSelected ? Colors.views.body : Colors.views.header),
+                                                    borderRadius: 6,
+                                                    borderWidth: 2,
+                                                    borderColor: isAlreadyLinked ? Colors.borders.light : (isSelected ? Colors.views.body : Colors.borders.light),
+                                                    opacity: isAlreadyLinked ? 0.5 : 1,
+                                                    flexDirection: 'row',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between'
+                                                }}
+                                            >
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme="h2" size={14}>
+                                                        {rawLeague.name}
+                                                    </Text>
+                                                    <Text theme="description" size={11} style={{ marginTop: 2 }}>
+                                                        {rawLeague.external_id}
+                                                    </Text>
+                                                </View>
+                                                {isAlreadyLinked && (
+                                                    <View
+                                                        transparent
+                                                        style={{
+                                                            paddingHorizontal: 8,
+                                                            paddingVertical: 4,
+                                                            borderRadius: 4,
+                                                            backgroundColor: Colors.text.success
+                                                        }}
+                                                    >
+                                                        <Text theme="h2" size={10} style={{ color: '#fff' }}>
+                                                            Already Linked
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                                {isSelected && !isAlreadyLinked && (
+                                                    <View
+                                                        transparent
+                                                        style={{
+                                                            width: 20,
+                                                            height: 20,
+                                                            borderRadius: 10,
+                                                            backgroundColor: '#fff',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center'
+                                                        }}
+                                                    >
+                                                        <Text theme="h2" size={12}>✓</Text>
+                                                    </View>
+                                                )}
+                                            </TouchableOpacity>
+                                        );
+                                            })}
+                                        </View>
+                                    </ScrollView>
+
+                                    {/* Pagination */}
+                                    {totalPages > 1 && (
+                                        <View transparent style={{ marginTop: 16 }}>
+                                            <Pagination
+                                                offset={linkModalPage}
+                                                pages={totalPages}
+                                                onPrevious={() => setLinkModalPage(prev => Math.max(0, prev - 1))}
+                                                onNext={() => setLinkModalPage(prev => Math.min(totalPages - 1, prev + 1))}
+                                                onSelectPage={(page) => setLinkModalPage(page)}
+                                            />
+                                        </View>
+                                    )}
+
+                                    {/* Results count */}
+                                    <View transparent style={{ marginTop: 8, alignItems: 'center' }}>
+                                        <Text theme="description" size={12}>
+                                            Showing {startIndex + 1}-{Math.min(endIndex, partnerRawLeagues.length)} of {partnerRawLeagues.length} league(s)
+                                        </Text>
+                                    </View>
+                                </>
+                            );
+                        })()}
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12, marginTop: 24 }}>
+                            <Button
+                                type="close"
+                                title="Cancel"
+                                onPress={() => setShowLinkModal(false)}
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                type="success"
+                                title={`Link ${selectedRawLeagues.length} League(s)`}
+                                onPress={handleLinkLeagues}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
         </View>
     );
 };