be-components 0.7.3 → 0.7.5

package/src/Competition/components/LeaderPicks.tsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from "react"
+import { FlatList, Image, ScrollView, TouchableOpacity, View } from "react-native"
+import TeamEventCard from "./TeamEventCard"
+
+import AthleteMarketCard from "./AthleteMarketCard"
+import MatchMarketCard from "./MatchMarketCard"
+import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionTypeProps, EventProps, MarketProps, MatchProps, PlayerPickProps, PublicPlayerProps, TeamProps, TournamentProps } from "../../types"
+import { CompetitionResultApi, PlayerPicksApi } from "../api"
+import Colors from "../../constants/colors"
+import { Button, Text } from "../../Components"
+
+
+type LeaderPicksProps = {
+    competition:CompetitionProps,
+    markets:MarketProps[],
+    events:EventProps[],
+    matches:MatchProps[],
+    tournaments:TournamentProps[],
+    athletes:AthleteProps[],
+    teams:TeamProps[],
+    competition_type:CompetitionTypeProps,
+    competition_matches:CompetitionMatchProps[],
+    competition_match_markets:CompetitionMatchMarketProps[],
+    height: number,
+    leader:PublicPlayerProps,
+    onNext?:() => void
+    onPrevious?:() => void,
+    onClose:() => void
+}
+const LeaderPicks = ({ markets, events, matches, athletes, competition, competition_type, competition_matches, competition_match_markets, leader, height, onClose, onNext, onPrevious }:LeaderPicksProps) => {
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        player_picks: PlayerPickProps[],
+        result?: CompetitionResultProps,
+        record?:CompetitionRecordProps
+    }>({
+        loading:false,
+        player_picks: []
+    });
+
+    const { player_picks, result, record } = data;
+    
+    let filtered_matches = competition_matches.filter(cm => player_picks.map(pp => pp.competition_match_id.toString()).includes(cm.competition_match_id))
+
+    useEffect(() => {
+        if(!competition || !leader){ return }
+        getPlayerPicksFromServer(competition.competition_id, leader.player_id, 0)
+    },[competition, leader.player_id])
+
+    const getPlayerPicksFromServer = async(competition_id:string, player_id:string, offset:number) => {
+        setData({ ...data, loading:true });
+        const pps = await PlayerPicksApi.getPlayerPicksByCompetition(competition_id, player_id, offset)
+        const { competition_records, competition_results } = await CompetitionResultApi.getResultsByCompetition(competition_id, 0, player_id)
+        setData({
+            ...data,
+            loading:false,
+            player_picks: pps,
+            result: competition_results.find(cr => cr.player_id == player_id),
+            record: competition_records.find(cr => cr.player_id == player_id)
+        });
+    }
+
+    const renderEvents = (data:{ item:CompetitionMatchProps, index:number }) => {
+        const match_markets = competition_match_markets.filter(cmm => cmm.competition_match_id == data.item.competition_match_id);
+        const event_picks = player_picks.filter(pp => pp.competition_match_id == data.item.competition_match_id)
+        
+        switch(data.item.event_type){
+            case 'team':
+                const event = events.find(e => e.event_id == data.item.event_id)
+                if(!event){ return <></> }
+                if(!data.item.side_type_override){
+                    return (
+                        <View style={{ margin:5, padding:10, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                            <TeamEventCard
+                                competition={competition}
+                                competition_type={competition_type}
+                                event={event}
+                                markets={markets}
+                                player_picks={event_picks}
+                                mode='view'
+                                onPick={() => console.log('')}
+                                competition_match={data.item}
+                                competition_match_markets={match_markets}
+                            />
+                        </View>
+                    )
+                }
+                switch(data.item.side_type_override){
+                    case 'athlete':
+                        const athlete = athletes.find(a => a.athlete_id == data.item.side_id_override);
+                        if(!athlete){ return <></> }
+                        return (
+                            <View style={{ margin:5, padding:10, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                                <AthleteMarketCard
+                                    event={event}
+                                    athlete={athlete}
+                                    competition={competition}
+                                    competition_type={competition_type}
+                                    markets={markets}
+                                    competition_match={data.item}
+                                    mode='view'
+                                    orientation='horizontal'
+                                    onPick={() => console.log('')}
+                                    competition_match_markets={match_markets}
+                                    player_picks={event_picks}
+                                />
+                            </View>
+                        )
+                    default: return <></>
+                }
+
+            case 'match':
+                const match = matches.find(m => m.match_id == data.item.event_id)
+                if(!match){ return <></> }
+                let home_athlete = athletes.find(a => a.athlete_id == match.participants[0])
+                let away_athlete = athletes.find(a => a.athlete_id == match.participants[1])
+                return (
+                    <View style={{ margin:5, padding:10, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <MatchMarketCard
+                            match={match}
+                            competition={competition}
+                            competition_type={competition_type}
+                            home_athlete={home_athlete}
+                            away_athlete={away_athlete}
+                            markets={markets}
+                            competition_match={data.item}
+                            mode='view'
+                            onPick={() => console.log('')}
+                            competition_match_markets={match_markets}
+                            player_picks={event_picks}
+                        />
+                    </View>
+                )
+
+            default: return <></>
+        }
+
+
+       
+    }
+
+    const cl = competition?.market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    return (
+        <View style={{ flex:1, height, backgroundColor:Colors.shades.white }}>
+            {record && result ?
+            <View nativeID="leader_header">
+                <View style={{ backgroundColor:Colors.brand.midnight, padding:10, marginBottom:10, paddingTop:20 }}>
+                    <Text size={18} color={Colors.shades.white} weight='bold' textAlign="center">Leaderboard Picks</Text>
+                    <View style={{ flexDirection:'row', marginTop:15, marginBottom:10, alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                        <View nativeID="place" style={{ padding:5 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight="bold">{result.place}</Text>
+                        </View>
+                        <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                            <Image
+                                source={{ uri: leader.profile_pic }}
+                                style={{ height:30, width:30, borderRadius:100 }}
+                                resizeMode="cover"
+                            />
+                        </View>
+                        <View nativeID="details" style={{ flex:1 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{leader.username}</Text>
+                            {competition_type?.type == 'wager' ?
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.earnings.toFixed(2)} Earned ({record.remaining_stakes.toFixed(2)} at risk)</Text>
+                                :
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.wins} - {record.losses} - {record.draws} ({record.remaining_picks} Remaining)</Text>
+                            }
+                        </View>
+                        <View nativeID="winnings">
+                            <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{result.winnings.toFixed(2)}</Text>
+                        </View>
+                    </View>
+                    {onNext && onPrevious ?
+                    <View nativeID="nav" style={{ flexDirection:'row', alignItems:'center', margin:10, marginBottom:0 }}>
+                        <TouchableOpacity style={{ flex:1 }}>
+                            <Text size={14} color={Colors.shades.white} weight='regular'>Previous</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={{ flex:1 }}>
+                            <Text size={14} color={Colors.shades.white} weight='regular' textAlign="right">Next</Text>
+                        </TouchableOpacity>
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            :<></>}
+    
+            <ScrollView style={{flex:1, backgroundColor:Colors.shades.white}} nativeID="leader_picks">
+                <Text style={{ margin:10 }} color={Colors.brand.midnight} textAlign="center" weight='bold' size={18}>{leader.username} Picks</Text>
+                <Text style={{ margin:10 }} color={Colors.brand.slate} textAlign="center" weight='bold' size={14}>Locked picks will appear after event is live</Text>
+                <View nativeID="picks" style={{ marginTop:10 }}>
+                    <FlatList
+                        scrollEnabled
+                        data={filtered_matches}
+                        renderItem={renderEvents}
+                        keyExtractor={(item) => item.competition_match_id.toString()}
+                    />
+                </View>
+            </ScrollView>
+            <View nativeID="action_row" style={{ padding:10 }}>
+                <Button
+                    title="Close"
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    borderRadius={22}
+                    title_size={14}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>    
+    )
+}
+
+export default LeaderPicks

package/src/Competition/components/ManageSeasonForm.tsx

@@ -0,0 +1,271 @@
+import { FlatList, Image, ScrollView, TextInput, TouchableOpacity, View } from "react-native"
+import React, { useEffect, useState } from "react"
+import type { CompetitionSeasonProps } from "../../types"
+import { CompetitionHelpers, CompetitionSeasonApi } from "../api"
+import { Button, Switch, Text } from "../../Components"
+import Colors from "../../constants/colors"
+import ImageUploader from "../../Components/ImageUploader"
+
+
+type ManageSeasonFormProps = {
+    competition_season?:CompetitionSeasonProps
+    width: number,
+    onComplete: (status:'done'|'cancel') => void
+}
+
+const ManageSeasonForm = ({ competition_season, width, onComplete }:ManageSeasonFormProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ show_templates, setShowTemplates ] = useState(true);
+    const [ season_templates, setSeasonTemplates ] = useState<CompetitionSeasonProps[]>([]);
+    const [ draft_season, setDraftSeason ] = useState(CompetitionHelpers.getEmptyCompetitionSeason())
+    const [ payout_allocation_label, setPayoutAllocationLabel ] = useState('0')
+
+    useEffect(() => {
+        loadTemplates()
+        if(!competition_season){ return }
+        setDraftSeason(competition_season);
+        setShowTemplates(false);
+    },[competition_season])
+
+    const loadTemplates = async() => {
+        let templates = await CompetitionSeasonApi.getCompetitionSeasonTemplates()
+        setSeasonTemplates(templates)
+    }
+
+    const handleSelectTemplate = (s:CompetitionSeasonProps) => {
+        setDraftSeason({ ...s, competition_season_id: '', season_name:'', season_description:'', following_season_id: s.competition_season_id })
+        setPayoutAllocationLabel((s.payout_allocation*100).toFixed())
+    }
+
+    const handleChangeAllocation = (text:string) => {
+        let non_str_num = parseFloat(text)
+        if(isNaN(non_str_num)){ return }
+        if(text == ''){ 
+            setPayoutAllocationLabel('')
+            return setDraftSeason({ ...draft_season, payout_allocation: 0 })
+         }
+        let allocation = parseFloat(text)
+        setPayoutAllocationLabel(text)
+        setDraftSeason({ ...draft_season, payout_allocation: allocation / 100 })
+    }
+
+    const handleSubmit = async() => {
+        if(!CompetitionHelpers.isSeasonValid(draft_season)){ return alert('Please complete all required firlst') }
+        setLoading(true);
+        await CompetitionSeasonApi.createCompetitionSeason(draft_season)
+        setLoading(false);
+        onComplete('done')
+    }
+
+    const renderTemplates = (data: { item:CompetitionSeasonProps, index:number }) => {
+        const selected = draft_season.following_season_id == data.item.competition_season_id ? true : false
+        return (
+            <TouchableOpacity 
+                onPress={() => handleSelectTemplate(data.item)}
+                style={{ flexDirection:'row', borderRadius:8, backgroundColor:selected?Colors.brand.electric:'transparent', alignItems:'center', margin:3, padding:5, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{uri: data.item.image?.url}}
+                        style={{ height:50, width:75 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text size={12} color={selected?Colors.shades.white:Colors.brand.midnight} weight='bold'>{data.item.season_name}</Text>
+                    <Text size={12} color={selected?Colors.shades.white:Colors.brand.midnight} weight='regular'>{data.item.season_description}</Text>
+                </View>
+
+            </TouchableOpacity>
+        )
+    }
+
+    let valid = CompetitionHelpers.isSeasonValid(draft_season)
+
+    return (
+        <View style={{ flex:1, backgroundColor:Colors.shades.white, padding:10 }}>
+            <View nativeID="form_header" style={{ padding:10 }}>
+                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>{competition_season ? draft_season.season_name : 'Create New Season'}</Text>
+            </View>
+            <ScrollView style={{ flex:1 }}>
+            <View nativeID="season_template">
+                <View nativeID="competition_details">
+                    <View nativeID="details_header" style={{ padding:10, paddingBottom:0 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>Season Template</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>Select a template for this season or do it on your own</Text>
+                    </View>
+                </View>
+                <View nativeID="template_options" style={{ margin:10, padding:10, borderRadius:4, backgroundColor:Colors.shades.shade100 }}>
+                    <View nativeID="template" style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                        <View nativeID="description" style={{ flex:1, marginRight:5 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>Use a Template</Text>
+                            {show_templates ?
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>All competitions will be auto-created with appropriate events and participants will be notified.</Text>
+                            :
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>You (the admin) will be responsible for creating each competition under this season.</Text>
+                            }
+                        </View>
+                        
+                        <Switch value={show_templates} switch_type='on_off' onChange={(value) => {
+                            if(!value){
+                                //Need to reset init season
+                                setDraftSeason(CompetitionHelpers.getEmptyCompetitionSeason())
+                            }
+                            setShowTemplates(!show_templates)}
+                        }/>
+                    </View>
+                    {show_templates ?
+                    <View style={{ marginTop:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>Template Options</Text>
+                        <View nativeID="template_options" style={{ marginTop:5, backgroundColor:Colors.shades.white, borderRadius:4, padding:10 }}>
+                            <FlatList
+                                data={season_templates}
+                                renderItem={renderTemplates}
+                                keyExtractor={(item) => item.competition_season_id.toString()}
+                            />
+                        </View>
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            {!show_templates || (show_templates && draft_season.following_season_id) ?
+            <View nativeID="form_options">
+                <View nativeID="competition_details">
+                    <View nativeID="details_header" style={{ padding:10, paddingBottom:0 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>Season Details</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>Name and describe this season</Text>
+                    </View>
+                    <View nativeID="details_input" style={{ margin:10, padding:10, borderRadius:4, backgroundColor:Colors.shades.shade100 }}>
+                        <View nativeID="season_name">
+                            <Text style={{ padding:10 }} size={14} color={Colors.brand.slate} weight='regular'>Name</Text>
+                            <TextInput
+                                style={{ borderRadius:4, backgroundColor:Colors.shades.white, padding:10, fontFamily:'barlow-regular', fontSize:14, color:Colors.brand.midnight }}
+                                placeholder="Season Name..."
+                                placeholderTextColor={Colors.brand.slate}
+                                value={draft_season.season_name}
+                                onChangeText={(text) => setDraftSeason({ ...draft_season, season_name: text })}
+                            />
+                        </View>
+                        <View nativeID="season_description">
+                            <Text style={{ padding:10 }} size={14} color={Colors.brand.slate} weight='regular'>Description</Text>
+                            <TextInput
+                                style={{ borderRadius:4, backgroundColor:Colors.shades.white, padding:10, fontFamily:'barlow-regular', fontSize:14, color:Colors.brand.midnight }}
+                                placeholder="Optional..."
+                                placeholderTextColor={Colors.brand.slate}
+                                value={draft_season.season_description}
+                                onChangeText={(text) => setDraftSeason({ ...draft_season, season_description: text })}
+                            />
+                        </View>
+                    </View>
+                </View>
+                <View nativeID="competition_image">
+                    <View nativeID="image_header" style={{ flexDirection:'row', alignItems:'center', padding:10, paddingBottom:0 }}>
+                        <View style={{ flex:1 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Season Image</Text>
+                            <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>Give an image to the season (2w X 1h)</Text>
+                        </View>
+                        <ImageUploader
+                            public_id={`${Math.floor(Math.random() * (1000000 - 0 + 1) + 1)}_season_image`}
+                            onFinishUpload={(obj) => setDraftSeason({ ...draft_season, image: { url: obj.secure_url, ...obj } })}
+                        >
+                            <Text size={14} color={Colors.brand.electric}>Edit Image</Text>
+                        </ImageUploader>
+                    </View>
+                    <View nativeID="season_image" style={{ justifyContent:'center', alignItems:'center', margin:5 }}>
+                        <Image
+                            source={{ uri: draft_season?.image?.url }}
+                            style={{ width:width*0.75, height: width*0.75/2 }}
+                            resizeMode="cover"
+                        />
+                    </View>
+                </View>
+                <View nativeID="season_options">
+                    <View nativeID="options_header" style={{ flexDirection:'row', alignItems:'center', padding:10, paddingBottom:0 }}>
+                        <View style={{ flex:1 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Season Configurations</Text>
+                            <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>Determines how the competition will operate and payout</Text>
+                        </View>
+                    </View>
+                    <View nativeID="options_input" style={{ margin:10, padding:10, borderRadius:4, backgroundColor:Colors.shades.shade100 }}>
+                        <View nativeID="single_buy_in" style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                            <View nativeID="description" style={{ flex:1, marginRight:5 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='bold'>One Buy In</Text>
+                                {draft_season.single_buy_in ?
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>Once a player has purchased a ticket, they will be automatically entered into any competition created under this season.</Text>
+                                :
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>Players will be required to buy-in to each competition created under this season.</Text>
+                                }
+                            </View>
+                            <Switch value={draft_season.single_buy_in} switch_type='on_off' onChange={() => setDraftSeason({ ...draft_season, single_buy_in: !draft_season.single_buy_in })}/>
+                        </View>
+                        <View nativeID="single_buy_in" style={{ flexDirection:'row', alignItems:'flex-start', marginTop:15 }}>
+                            <View nativeID="description" style={{ flex:1, marginRight:5 }}>
+                                <Text size={14} color={Colors.brand.midnight} weight='bold'>Allow Late Buy In</Text>
+                                {draft_season.allow_late_buy_in ?
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>A player can enter this season at any time (even if the first competition has completed)</Text>
+                                :
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>A player must enter the first competition under the season to participate.</Text>
+                                }
+                            </View>
+                            <Switch value={draft_season.allow_late_buy_in} switch_type='on_off' onChange={() => setDraftSeason({ ...draft_season, allow_late_buy_in: !draft_season.allow_late_buy_in })}/>
+                        </View>
+                    </View>
+                </View>
+                <View nativeID="season_payout_details">
+                    <View nativeID="payout_header" style={{ flexDirection:'row', alignItems:'center', padding:10, paddingBottom:0 }}>
+                        <View style={{ flex:1 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Season Payout</Text>
+                            <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>How would you like the funds in the season to payout?</Text>
+                        </View>
+                    </View>
+                    <View nativeID="payout_input" style={{ margin:10, padding:10, borderRadius:4, backgroundColor:Colors.shades.shade100 }}>
+                        <View nativeID="payout_allocation" style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                            <View nativeID="description" style={{ flex:1, marginRight:5 }}>
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>How much of the total pot will be paid out to the season vs each competition</Text>                                
+                            </View>
+                            <TextInput
+                                value={payout_allocation_label}
+                                onChangeText={(text) => handleChangeAllocation(text)}
+                                style={{ padding:10, borderRadius:4, width: width * 0.2, backgroundColor:Colors.shades.white, textAlign:'center', color:Colors.brand.midnight, fontFamily:'barlow-bold' }}
+
+                            />
+                        </View>
+                        <View style={{ flexDirection:'row', marginTop:10 }}>
+                            <View style={{ flex:1, padding:10, backgroundColor:Colors.shades.shade600, borderRadius:4, marginRight:5 }}>
+                                <Text size={12} color={Colors.brand.midnight} textAlign="center">Each Competition</Text>
+                                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{((1 - draft_season.payout_allocation) * 100).toFixed()}%</Text>
+                            </View>
+                            <View style={{ flex:1, padding:10, backgroundColor:Colors.shades.shade600, borderRadius:4, marginLeft:5 }}>
+                                <Text size={12} color={Colors.brand.midnight} textAlign="center">Season</Text>
+                                <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="center">{((draft_season.payout_allocation) * 100).toFixed()}%</Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            </ScrollView>
+            <View nativeID="action_row" style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    style={{ flex:1, marginRight:3 }}
+                    title="Cancel"
+                    onPress={() => onComplete('cancel')}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    borderColor={Colors.brand.electric}
+                />
+                <Button
+                    disabled={!valid || loading}
+                    style={{ flex:2, marginLeft:3, opacity:valid&&!loading?1:0.5 }}
+                    title={draft_season.competition_season_id ? 'Edit Season' : 'Create Season'}
+                    onPress={() => handleSubmit()}
+                    title_color={Colors.shades.white}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ManageSeasonForm

package/src/Competition/components/MarketsCard.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react"
+import { ActivityIndicator, FlatList, TouchableOpacity, View } from "react-native"
+import type { CompetitionMatchMarketProps, MarketProps, PlayerPickProps } from "../../types"
+import Colors from "../../constants/colors"
+import { Icons, Text } from "../../Components"
+import { CompetitionHelpers } from "../api"
+
+
+type MarketsCardProps = {
+    competition_match_markets:CompetitionMatchMarketProps[]
+    markets:MarketProps[],
+    player_picks: PlayerPickProps[]
+    mode: 'view'|'play'
+    orientation?: 'vertical'|'horizontal'
+    disabled?:boolean;
+    locked?:boolean;
+    onMarketSelect:(cmm:CompetitionMatchMarketProps, player_pick?:PlayerPickProps) => void
+}
+const MarketsCard = ({ competition_match_markets, markets, orientation, onMarketSelect, player_picks, locked, disabled, mode }:MarketsCardProps) => {
+    const [ markets_width, setMarketsWidth ] = useState(0)
+
+    let unique_market_ids = [ ...new Set(competition_match_markets.map(cmm => cmm.market_id))]
+    const getPickColor = (player_pick:PlayerPickProps) => {
+        if(locked){ return Colors.shades.shade600 }
+        switch(player_pick.result_ind){
+            case 'win': return Colors.utility.success
+            case 'lose': return Colors.utility.error
+            case 'draw': return Colors.brand.slate
+            default: return Colors.highlights.highlight200
+        }
+    }
+
+    const renderMarkets = (data:{item:string, index:number}) => {
+        const market = markets.find(m => m.market_id == data.item)
+        const match_markets = competition_match_markets.filter(cmm => cmm.market_id == data.item)
+        if(!market){ return <></> }
+
+        const market_width = orientation == "horizontal" ? markets_width : markets_width / unique_market_ids.length
+
+        return (
+            <View style={{ flex:1, flexDirection:orientation == 'horizontal'?'row':'column', width: market_width }}>
+                {orientation == 'horizontal' ?
+                <></>
+                :
+                <Text size={12} color={Colors.shades.black} weight='regular' textAlign="center">{market.type.toUpperCase()}</Text>
+                }
+                {match_markets.sort((a) => {
+                    if(a.side == market.trade_side){ return 1 } else { return -1}
+                }).map(mm => {
+                    const player_pick = player_picks.find(pp => pp.market_id == data.item && pp.side == mm.side)
+                    return (
+                        <TouchableOpacity
+                            delayPressIn={0} 
+                            disabled={locked || mode == 'view' || disabled}
+                            onPress={() => onMarketSelect(mm, player_pick)}
+                            style={{ 
+                                flex:1, marginTop:3, justifyContent:'center', padding:7.5, 
+                                backgroundColor: player_pick ? getPickColor(player_pick) : Colors.shades.shade600, 
+                                borderRadius:4, 
+                                margin:3,
+                                opacity: disabled ? 0.5 : 1
+                            }}>
+                            {market.var_1_required ?
+                            <Text size={12} color={player_pick&&!locked?Colors.shades.white:Colors.shades.black} textAlign="center">{mm.side=='over'?'O ':mm.side=='under'?'U ':''}{CompetitionHelpers.getVar1Label(mm.var_1, market)}</Text>
+                            :market.show_side_option ?
+                            <Text size={12} color={player_pick&&!locked?Colors.shades.white:Colors.shades.black} textAlign="center">{mm.side.toUpperCase()}</Text>
+                            :<></>}
+                            <Text size={12} color={player_pick&&!locked?Colors.shades.white:Colors.shades.black} textAlign="center" weight='bold'>{CompetitionHelpers.getOddsLabel(mm.odds)}</Text>
+                            {locked ?
+                            <View style={{ position:'absolute', backgroundColor:Colors.shades.shade600, borderRadius:4, top:0, bottom:0, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.LockClosedIcon size={14} color={Colors.shades.black} />
+                            </View>
+                            :<></>}
+                        </TouchableOpacity>
+                    )
+                })}
+            </View>
+        )
+    }
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout;
+            setMarketsWidth(width)
+        }}>
+            {markets_width > 0 ?
+            <View>
+                {unique_market_ids.length > 0 ?
+                <FlatList
+                    horizontal
+                    data={unique_market_ids}
+                    renderItem={renderMarkets}
+                />
+                :
+                <View style={{ height:100, justifyContent:'center', alignItems:'center' }}>
+                    <Icons.LockClosedIcon color={Colors.brand.midnight} size={32}/>
+                </View>
+                }
+            </View>
+            :
+            <View style={{ height:100, justifyContent:'center', alignItems:'center' }}>
+                <ActivityIndicator size={'large'} color={Colors.brand.midnight}/>
+            </View>
+            }
+        </View>
+    )
+}
+
+export default MarketsCard