be-components 1.3.0 → 1.3.1

package/src/CompetitionManager/components/CompetitionContestsForm.tsx

@@ -1,21 +1,22 @@
-import React, { } from 'react';
-//import { FlatList, Image, TouchableOpacity, View } from "react-native"
+import React, { useState } from 'react';
+import { FlatList, Image, TouchableOpacity, View } from "react-native"
 import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, EventProps, LeagueProps, MarketProps, MatchProps, TeamProps, TournamentProps } from '../../types';
-//import { ManageCompetitionApi } from '../api';
-//import Colors from '../../constants/colors';
-//import { Button, Icons, Text } from '../../Components';
-//import CompetitionMatchMarketCard from './CompetitionMatchMarketCard';
-//import moment from 'moment-mini';
-//import { view_styles } from '../../constants/styles';
-//import MarketSelector from './MarketSelector';
+import Colors from '../../constants/colors';
+import { Button, Icons, Switch, Text } from '../../Components';
+import CompetitionMatchMarketCard from './CompetitionMatchMarketCard';
+import moment from 'moment-mini';
+import { view_styles } from '../../constants/styles';
 
 
 
 type CompetitionContestsFormProps = {
     width:number,
+    action_loading:boolean,
+    is_valid?:boolean,
     competition:CompetitionProps,
     markets:MarketProps[],
     leagues:LeagueProps[],
+    primary_markets:{ market:MarketProps, included:boolean}[],
     events:EventProps[],
     tournaments:TournamentProps[],
     matches:MatchProps[],
@@ -23,6 +24,12 @@ type CompetitionContestsFormProps = {
     teams:TeamProps[],
     competition_matches: CompetitionMatchProps[],
     competition_match_markets:CompetitionMatchMarketProps[],
+    onShowContests:() => void,
+    onAddPrimaryMarket:(market:MarketProps) => void,
+    onRemovePrimaryMarket:(market:MarketProps) => void,
+    onShowAthletes:(contest_id:string, contest_type:string, market_id:string) => void,
+    onShowMarkets:(contest_id:string, contest_type:string) => void, 
+    onDeleteMarket:(contest_id:string, contest_type:string, market:MarketProps) => void,
     onSaveCompetitionMatch:(competition_id:string, event_id:string, event_type:string, match_type:string, event:EventProps, market_id_override?:string, side_type_override?:string, side_id_override?:string) => void,
     onUpdateCompetitionMatch:(cm:CompetitionMatchProps) => void,
     onSaveCompetitionMatchMarkets: (cmms:CompetitionMatchMarketProps[]) => void,
@@ -31,176 +38,82 @@ type CompetitionContestsFormProps = {
 }
 
 
-const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
-    
-    /*
+const CompetitionContestsForm = ({
+    is_valid,
+    competition,
+    width,
+    primary_markets,
+    events,
+    athletes,
+    markets,
+    leagues,
+    competition_matches,
+    competition_match_markets,
+    onDeleteMarket,
+    onRemovePrimaryMarket,
+    onDeleteCompetitionMatch,
+    onDeleteCompetitionMatchMarkets,
+    onShowAthletes,
+    onShowContests,
+    onShowMarkets,
+    onAddPrimaryMarket,
+}:CompetitionContestsFormProps) => {
     const [ expanded, setExpanded ] = useState(true);
-    const [ contests_visible, setContestsVisible ] = useState(false);
     const [ show_match_markets, setShowMatchMarkets ] = useState<string[]>([]);
-    const [ selectable_athletes, setAthletes ] = useState<AthleteProps[]>([]);
-    const [ selectable_events, setTeamEvents ] = useState<EventProps[]>([]);
-    const [ competition_summaries, setCompetitionSummaries ] = useState<any[]>([]);
-    const [ show_athletes, setShowAthletes ] = useState<{
-        visible:boolean,
-        event_id?:string,
-        event_type?:string,
-        market_id?:string,
-        team_ids:string[],
-        restricted_ids?:string[],
-        top:number,
-        right:number,
-        positions:string[],
-        selected_athletes:string[],
+    const [ active_contest_type ] = useState('team');
+    const [ expanded_contests, setExpandedContests ] = useState<string[]>([]);
 
-    }>({
-        visible:false,
-        positions:[],
-        top:0,
-        right:0,
-        selected_athletes:[],
-        team_ids:[]
-    })
-    const [ show_markets, setShowMarkets ] = useState<{
-        visible:boolean,
-        event_id?:string,
-        event_type?: string,
-        selected_markets:string[],
-        supported_markets:MarketProps[],
-    }>({
-        visible:false,
-        supported_markets: [],
-        selected_markets: [],
-    });
     const unique_team_events = [ ...new Set(competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id)) ]
 
-*/
-
-/*
-    const handleSelectEvent = async(event:EventProps) => {
-        onSaveCompetitionMatch(competition.competition_id, event.event_id, 'team', 'event', event)
-        //setTeamEvents(team_events.concat(event))
-    }
-*/
-/*
-    const handleSelectAthlete = async(athlete:AthleteProps) => {
-        
-        if(!show_athletes?.event_id){ return alert('Unable to process') }
-        setAthletes(athletes.concat(athlete))
-        let latest_trades = await MarketApi.getLatestTradesByEventIds([show_athletes.event_id], show_athletes.event_type);
-        latest_trades = latest_trades.filter(lt => lt.market_id == show_athletes.market_id && lt.market_type == 'FOR_MONEY' && lt.side_type == 'athlete' && lt.side_id == athlete.athlete_id);
-        if(latest_trades.length !== 2){ return alert('We do not have data for this athlete') }
-        //First we need to check if we have an empty competition match (match with no side_id_override)
-        const existing_cm = competition_matches.find(cm => cm.event_id == show_athletes.event_id && cm.event_type == show_athletes.event_type && cm.market_id_override == show_athletes.market_id && !cm.side_id_override);
-        if(existing_cm){
-            //Then we just need to add the side_id override to the cm and then create the cmms
-            onUpdateCompetitionMatch({ ...existing_cm, side_id_override: athlete.athlete_id })
-            //Create the cmms
-            const cmms:CompetitionMatchMarketProps[] = []
-            latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: existing_cm.competition_match_id }))
-            if(cmms.length != 2){ return alert('Unable to process') }
-            onSaveCompetitionMatchMarkets(cmms)
-        } else {
-            //There was not an existing placeholder - we now need to auto create a match
-            switch(show_athletes.event_type){
-                case 'team':
-                    const event = team_events.find(e => e.event_id == show_athletes.event_id)
-                    if(!event){ return alert('Unable to process') }
-                    const new_cm = await onSaveCompetitionMatch(competition.competition_id, show_athletes.event_id, show_athletes.event_type, 'athlete', event, show_athletes.market_id, 'athlete', athlete.athlete_id);
-                    const cmms:CompetitionMatchMarketProps[] = []
-                    latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: new_cm.competition_match_id }))
-                    if(cmms.length != 2){ return alert('Unable to process') }
-                    onSaveCompetitionMatchMarkets(cmms)
-                    break
-                default: return alert('Not handled for this!')
-            }
-        }
-        setShowAthletes({
-            ...show_athletes,
-            selected_athletes: show_athletes.selected_athletes.concat(athlete.athlete_id)
-        })
-        
-    }
-    */
-
-    /*
-
-    const handleSelectMarket = async(market:MarketProps) => {
-        
-        if(!show_markets){ return alert('Unable to process') }
-        if(market.level == 'event' && market.primary_market){
-            let competition_match = competition_matches.find(cm => cm.event_id == show_markets.event_id && cm.event_type == show_markets.event_type && !cm.market_id_override)
-            if(!competition_match){ return alert('Unable to process this primary market!') }
-            //HERE IS HWERE WE WILL CREATE THE EMPTY MATCH MARKET!
-            let latest_trades = await MarketApi.getLatestTradesByEventIds([show_markets.event_id], show_markets.event_type);
-            latest_trades = latest_trades.filter(lt => lt.market_id == market.market_id && lt.market_type == 'FOR_MONEY');
-            if(latest_trades.length != 2){ return alert('Unable to add this market') }
-            const cmms:CompetitionMatchMarketProps[] = []
-            latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: competition_match.competition_match_id }))
-            if(cmms.length != 2){ return alert('Unable to process') }
-            onSaveCompetitionMatchMarkets(cmms)
-            setShowMarkets({ ...show_markets, selected_markets: show_markets.selected_markets.concat(market.market_id)})
-            return
-        }
-        //Okay! This was a non-primary market
-        //There will not be an existing competition match so we need to create a new one!
-        if(market.event_type == 'team'){
-            let event = team_events.find(e => e.event_id == show_markets.event_id);
-            if(!event){ return alert('Unable to process this') }
-            onSaveCompetitionMatch(competition.competition_id, show_markets.event_id, show_markets.event_type, market.level, event, market.market_id, market.level, undefined);
-            setShowMarkets({ ...show_markets, selected_markets: show_markets.selected_markets.concat(market.market_id)})
-            return
-        }
-        
+    const renderPrimaryMarkets = (data: { item:{ market:MarketProps, included:boolean }, index:number }) => {
+        return (
+            <View style={{ padding:10, width:100, borderRadius:8, backgroundColor:Colors.shades.white, margin:5, ...view_styles.float }}>
+                <Text style={{ marginBottom:10 }} theme='header'>{data.item.market.type}</Text>
+                <Switch
+                    switch_type='on_off'
+                    value={data.item.included}
+                    onChange={(val) => val ? onAddPrimaryMarket(data.item.market) : onRemovePrimaryMarket(data.item.market)}
+                />
+            </View>
+        )
     }
-        */
-
-    /*
-
+    
     const renderMarkets = (data: { item:string, index:number, event_id:string, event_type:string }) => {
         const market = markets.find(m => m.market_id == data.item);
         if(!market){ return <></> }
         const show_details = show_match_markets.includes(`${data.event_type}:${data.event_id}:${data.item}`) ? true : false
 
         return (
-            <TouchableOpacity style={{ flex:1,borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, margin:3, maxWidth:125, minWidth:75, backgroundColor:show_details ? Colors.brand.midnight : Colors.shades.white }}
+            <TouchableOpacity style={{ flex:1, borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, margin:3,  minWidth:125, backgroundColor:show_details ? Colors.brand.midnight : Colors.shades.white }}
             onPress={() => {
                 if(show_details){ return setShowMatchMarkets(show_match_markets.filter(smm => smm != `${data.event_type}:${data.event_id}:${data.item}`)) }
                 return setShowMatchMarkets(show_match_markets.concat(`${data.event_type}:${data.event_id}:${data.item}`))
             }}>
-                <Text size={14} color={show_details?Colors.shades.white:Colors.brand.midnight} weight="bold" textAlign="center">{market.stat_label ?? market.type}</Text>
-                <Text style={{ marginTop:3 }} size={12} color={show_details?Colors.shades.white:Colors.brand.midnight} textAlign="center">{market.description}</Text>
+                <View style={{ flexDirection:'row' }}>
+                    <Button
+                        title='X'
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.error}
+                        onPress={async() => {
+                            const confirmed = await confirm('Are you sure you want to delete this market?')
+                            if(!confirmed){ return }
+                            onDeleteMarket(data.event_id, data.event_type, market);
+                        }}
+                    />
+                    <View style={{ flex:1 }}>
+                        <Text size={14} color={show_details?Colors.shades.white:Colors.brand.midnight} weight="bold" textAlign="center">{market.stat_label ?? market.type}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={show_details?Colors.shades.white:Colors.brand.midnight} textAlign="center">{market.description}</Text>
+                    </View>
+                </View>
                 {market.level == 'athlete' && show_details ?
                 <Button
-                    title="Add Athlete"
-                    title_size={10}
+                    title="ADD ATHLETE"
                     style={{ marginTop:5 }}
+                    padding={10}
                     title_color={Colors.brand.electric}
                     backgroundColor={Colors.shades.white}
-                    onPress={async(evt) => {
-                        
-                        if(data.event_type != 'team'){ return alert('Only supported for team based events currently') }
-
-                        let latest_trades = await MarketApi.getLatestTradesByEventIds([data.event_id], data.event_type);
-                        latest_trades = latest_trades.filter(lt => lt.market_id == data.item && lt.market_type == 'FOR_MONEY' && lt.side_type == 'athlete');
-                        let restricted_ids = [ ...new Set(latest_trades.map(t => t.side_id)) ]
-                        const event = team_events.find(e => e.event_id == data.event_id)
-                        let team_ids = [event.away_team_id, event.home_team_id]
-
-                        const selected_athletes = competition_matches.filter(cm => cm.event_id == data.event_id && cm.event_type == data.event_type && cm.market_id_override == data.item && cm.side_type_override=='athlete').map(cm => cm.side_id_override);
-
-                        setShowAthletes({
-                            visible: true,
-                            selected_athletes,
-                            team_ids,
-                            market_id:data.item,
-                            restricted_ids,
-                            positions:market.supported_positions ?? [],
-                            event_id:data.event_id,
-                            event_type: data.event_type,
-                            top:evt.nativeEvent.offsetX,
-                            right:evt.nativeEvent.offsetY
-                        })
-                        
+                    onPress={() => {
+                        onShowAthletes(data.event_id, data.event_type, data.item);
                     }}
                 />
                 :<></>}
@@ -208,9 +121,8 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                 
         )
     }
-    */
 
-    /*
+    
     const showDetails = (show_event_id:string, show_event_type:string) => {
         
         let show_cms:CompetitionMatchProps[] = []
@@ -222,8 +134,10 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
             if(event_id != show_event_id){ return }
             if(show_event_type != event_type){ return }
             const market = markets.find(m => m.market_id == market_id);
+            if(!market){ return }
             if(market.level == 'event' && market.primary_market){
                 const primary_cm = competition_matches.find(cm => cm.event_id == event_id && cm.event_type == event_type && !cm.market_id_override);
+                if(!primary_cm){ return }
                 const primary_cmms = competition_match_markets.filter(cmm => cmm.competition_match_id == primary_cm?.competition_match_id && cmm.market_id == market_id);
                 show_cms.push({ ...primary_cm, competition_match_markets:primary_cmms })
             }
@@ -231,27 +145,23 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                 const cms = competition_matches.filter(cm => cm.event_id == event_id && cm.event_type == event_type && cm.market_id_override == market_id)
                 cms.map(cm => {
                     let cmm = competition_match_markets.filter(cmm => cmm.competition_match_id == cm.competition_match_id);
-                    if(cmm.length == 2){
+                    //if(cmm.length == 2){
                         show_cms.push({ ...cm, competition_match_markets: cmm })
-                    }
+                    //}
                 })
             }
-            
         })
+            
         return show_cms
-        
-       return []
     }
-       */
-
-    /*
+       
 
     const getMatchTitle = (cm:CompetitionMatchProps, market:MarketProps):{image_url?:string, header:string, description:string} => {
         
         let error = { header: 'Market', description:market.description }
         switch(cm.event_type){
             case 'team':
-                const event = team_events.find(e => e.event_id == cm.event_id)
+                const event = events.find(e => e.event_id == cm.event_id)
                 if(!event){ return error }
                 if(!cm.market_id_override){
                     //This is a primary one that we can just do the market name and event title
@@ -268,20 +178,14 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
         }
         
     }
-        */
-
-    /*
+    
 
     const renderCompetitionMatches = (data: { item:CompetitionMatchProps, index:number }) => {
-        if(!data.item.competition_match_markets){ return }
+        if(!data.item.competition_match_markets){ return <></> }
         const market = markets.find(m => data.item.competition_match_markets && m.market_id == data.item.competition_match_markets[0]?.market_id)
         if(!market){ return <></> }
 
         const { image_url, header, description } = getMatchTitle(data.item, market)
-        let match_summaries = competition_summaries.filter(cs => cs.competition_match_id == data.item.competition_match_id && cs.market_id == market.market_id)
-        if(data.item.side_id_override){
-            match_summaries = match_summaries.filter(ms => ms.side_id == data.item.side_id_override);
-        }
         return (
             <View style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
                 <Button
@@ -292,9 +196,9 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                     title_color={Colors.utility.error}
                     onPress={() => {
                         if(data.item.market_id_override){
-                            //return onDeleteCompetitionMatch(data.item.competition_match_id)
+                            return onDeleteCompetitionMatch(data.item.competition_match_id)
                         }
-                        //return onDeleteCompetitionMatchMarkets(data.item.competition_match_markets)
+                        return onDeleteCompetitionMatchMarkets(data.item.competition_match_markets ?? [])
                     }}
                 />
                 {image_url ?
@@ -315,7 +219,7 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                     event_type={data.item.event_type}
                     competition_match_id={data.item.competition_match_id}
                     competition_match_markets={data.item.competition_match_markets}
-                    competition_summaries={match_summaries}
+                    competition_summaries={[]}
                     market={market}
                     onSaveMarkets={(cmms) => console.log(cmms)}
                     onUpdateMarkets={(cmms) => console.log(cmms)}
@@ -329,16 +233,18 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
         const event = events.find(e => e.event_id == data.item);
         if(!event){ return <></> }
         if(!event.supported_markets){ return <></> }
-        const supported_markets = markets.filter(m => event.supported_markets?.map(sm => sm.market_id.toString()).includes(m.market_id.toString()));
         const cms = competition_matches.filter(cm => cm.event_id == data.item && cm.event_type == 'team');
         const cmms = competition_match_markets.filter(cmm => cms.map(cm => cm.competition_match_id.toString()).includes(cmm.competition_match_id));
-        const unique_market_ids = [ ...new Set(cmms.map(cmm => cmm.market_id).concat(cms.filter(cm => cm.market_id_override).map(cm => cm.market_id_override))) ]
+        const unique_market_ids = [ ...new Set(cmms.map(cmm => cmm.market_id).concat(cms.filter(cm => cm.market_id_override).map(cm => cm.market_id_override ?? '0'))) ]
         const league = leagues.find(l => l.league_id == event.league_id);
         const visible_matches = showDetails(data.item, 'team')
-
+        const expanded = expanded_contests.includes(`${event.event_id}:team`) ? true : false
         return (
-            <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, margin:10, zIndex: data.index * -1 }}>
-                <View style={{ flexDirection:'row', padding:15, zIndex:1}}>
+            <View style={{ margin:5,  backgroundColor:Colors.shades.white, zIndex: data.index * -1, maxWidth:width }}>
+                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:15, zIndex:1}} onPress={() => {
+                    if(expanded){ return setExpandedContests(expanded_contests.filter(c => c != `${event.event_id}:team`)) }
+                    else { return setExpandedContests(expanded_contests.concat(`${event.event_id}:team`)) }
+                }}>
                     {['pending','paused'].includes(competition.status) && cms.length == 1 && cmms.length == 0 ? 
                     <Button
                         title="X"
@@ -346,10 +252,10 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                         borderRadius={8}
                         borderWidth={1}
                         borderColor={Colors.utility.error}
-                        onPress={() => onDeleteCompetitionMatch(cms[0]?.competition_match_id)}
+                        onPress={() => onDeleteCompetitionMatch(cms[0]?.competition_match_id ?? '')}
                     />
                     :<></>}
-                    <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ flex:1, marginLeft:5, flexDirection:'row', alignItems:'center' }}>
                         {league?.league_image ?
                         <Image
                             source={{ uri: league.league_image }}
@@ -357,39 +263,29 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
                             resizeMode="cover"
                         />
                         :<></>}
-                        <View>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{event.away.market_name} {event.away.name} vs {event.home.market_name} {event.home.name}</Text>
+                        <View style={{ flex:1 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{event.away?.market_name} {event.away?.name} vs {event.home?.market_name} {event.home?.name}</Text>
                             <Text style={{ marginTop:4 }} size={12} color={Colors.brand.midnight}>{moment(event.scheduled_datetime).format('MMMM DD hh:mm a')}</Text>
                         </View>
                     </View>
-                    <Button
-                        title="Add Markets"
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.brand.midnight}
-                        onPress={() => {
-                            setShowMarkets({
-                                visible:true,
-                                event_id: data.item,
-                                event_type: 'team',
-                                selected_markets:unique_market_ids,
-                                supported_markets,
-                            })
-                        }}
-                    />
-                    <View style={{ position:'absolute', top:0, right:0, ...view_styles.section, maxWidth:300 }}>
-                        <MarketSelector
-                            visible={show_markets.event_id == data.item ? true : false}
-                            markets={show_markets.supported_markets}
-                            selected_markets={show_markets.selected_markets}
-                            onSelectMarket={(market) => handleSelectMarket(market)}
-                            onDeselectMarket={(market) => console.log(market)}
-                            onClose={() => setShowMarkets({ visible: false, supported_markets:[], selected_markets:[] })}
+                    <View style={{ marginLeft:5, marginRight:5, height:25, width:25, justifyContent:'center', alignItems:'center', borderRadius:100, backgroundColor:Colors.brand.electric }}>
+                        <Text size={10} color={Colors.shades.white} weight='bold'>{unique_market_ids.length}</Text>
+                    </View>
+                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {expanded ?
+                <View style={{ padding:10 }}>
+                    <View style={{ flexDirection:'row', marginBottom:5 }}>
+                        <Text style={{ flex:1 }} size={16} weight='bold'>Selected Markets</Text>
+                        <Button
+                            title="Add Markets"
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.midnight}
+                            onPress={() => {
+                                onShowMarkets(data.item, 'team');
+                            }}
                         />
                     </View>
-                </View>
-                {unique_market_ids.length > 0 ?
-                <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
-                    <Text style={{ marginBottom:5 }} size={16} weight='bold'>Selected Markets</Text>
                      <View style={{ flexDirection:'row', flexWrap: 'wrap', padding:10 }}>
                         {unique_market_ids.map((market_id, index) => {
                             return (
@@ -410,64 +306,63 @@ const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
         )
     }
 
-    */
 
-    return (<></>)
-/*
+
+
     return (
         <View style={{ ...view_styles.section, minWidth:350, flexGrow:1, maxWidth:width }}>
-            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
-                <View style={{ flex:1, marginRight:10 }}>
+            <TouchableOpacity style={{ ...view_styles.section_header, maxWidth:width }} onPress={() => setExpanded(!expanded)}>
+                {is_valid ?
+                <Icons.CheckCirlceIcon size={16} color={Colors.utility.success} />
+                :
+                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                }
+                <View style={{ flex:1, marginRight:10, marginLeft:10 }}>
                     <Text theme='header'>Competition Contests</Text>
                     <Text style={{ marginTop:3 }} theme='body'>Competitions require contests for users to make picks / wagers.  Select 'Add Contests' to get started.</Text>
                 </View>
                 <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
             </TouchableOpacity>
             {expanded ?
-            <View style={{ ...view_styles.section_body }}>
-                {unique_team_events.map((id, index) => {
-                    return renderTeamEvents({ item:id, index })
-                })}
+            <View style={{ ...view_styles.section_body, padding:0, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ ...view_styles.section_header }}>
+                    <TouchableOpacity style={{ flex:1 }}>
+                        <Text theme='header'>Team Events</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Select team based events to include in this competition</Text>
+                    </TouchableOpacity>
+                    <Button
+                        title='ADD'
+                        padding={10}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.success}
+                        onPress={() => onShowContests()}
+                    />
+                </View>
+                <View style={{ padding:10 }}>
+                    <Text style={{ padding:10 }} theme='header_2'>The following markets can be added to all events</Text>
+                    <View style={{ padding:5 }}>
+                        <FlatList
+                            data={primary_markets}
+                            renderItem={renderPrimaryMarkets}
+                            horizontal
+                            keyExtractor={(item) => item.market.market_id.toString()}
+                        />
+                    </View>
+                </View>
+                <View style={{ ...view_styles.section_body, padding:0 }}>
+                    {active_contest_type == 'team' ?
+                    <View>
+                        {unique_team_events.map((id, index) => {
+                            return renderTeamEvents({ item:id, index })
+                        })}
+                    </View>
+                    :<></>}
+                </View>
             </View>
             :<></>}
         </View>
     )
-        */
+        
 }
 
-export default CompetitionContestsForm
-
-
-
-/*
-<View style={{ position:'absolute', top:show_athletes.top, right:show_athletes.right }}>
-                    <AthleteSelector
-                        onClose={() => setShowAthletes({ visible:false, positions:[], selected_athletes: [], top:0, right:0, team_ids:[] })}
-                        onDeselectAthlete={(athlete) => console.log(athlete)}
-                        onSelectAthlete={(athlete) => handleSelectAthlete(athlete)}
-                        team_ids={show_athletes.team_ids}
-                        restricted_ids={show_athletes.restricted_ids}
-                        selected_athletes={show_athletes.selected_athletes}
-                        visible={show_athletes.visible}
-                    />
-                </View>
-*/
-
-
-/*
-<Button
-                    title="Add Contests"
-                    backgroundColor={Colors.brand.electric}
-                    title_color={Colors.shades.white}
-                    onPress={() => setContestsVisible(true)}
-                />
-                <View style={{ position:'absolute', top:0, right:0 }}>
-                    <ContestSelector 
-                        visible={contests_visible}
-                        selected_events={unique_team_events}
-                        onSelectEvent={(event) => handleSelectEvent(event)}
-                        onDeselectEvent={(event) => console.log(event)}
-                        onClose={() => setContestsVisible(false)}
-                    />
-                </View>
-*/
+export default CompetitionContestsForm