Untitled

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import Collapsible from 'react-native-collapsible';
import { useNavigation } from '@react-navigation/native';
import eventsByWeek from '../events_by_week.json'; // Import the events_by_week.json file

const CompetitionItem = ({ item, index, expandedWeek, toggleExpanded }) => {
  const navigation = useNavigation();

  const handleEventPress = (event) => {
    const { id, sku, name, location, divisions } = event;
  
    // Navigate to the EventDetails screen, passing event data as params
    navigation.navigate('Details', {
      eventId: id,
      eventSku: sku,
      eventName: name,
      eventLocation: location,
      eventDivisions: divisions,
    });
  };

  return (
    <TouchableOpacity onPress={() => toggleExpanded(index)}>
      <View style={styles.competitionContainer}>
        <Text style={styles.weekHeading}>{`${item.dates[0]} - ${item.dates[1]}`}</Text>
        <Collapsible collapsed={expandedWeek !== index}>
          {item.dates.map((date, idx) => (
            <View key={idx}>
              <Text style={styles.weekDate}>{date}</Text>
              {item.events.map((event, eventIdx) => (
                <TouchableOpacity key={eventIdx} onPress={() => handleEventPress(event)}>
                  <View style={styles.eventButton}>
                    <Text style={styles.eventButtonText}>{event.name}</Text>
                    {/* Display other event information */}
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          ))}
        </Collapsible>
        {/* Display number of events */}
        <Text style={styles.numberOfEvents}>Number of Events: {item.events.length}</Text>
      </View>
    </TouchableOpacity>
  );
};

const CompetitionList = () => {
  const [expandedWeek, setExpandedWeek] = useState(null);

  const toggleExpanded = (index) => {
    setExpandedWeek(expandedWeek === index ? null : index);
  };

  return (
    <ScrollView style={styles.container}>
      {eventsByWeek.map((item, index) => (
        <CompetitionItem
          key={index}
          item={item}
          index={index}
          expandedWeek={expandedWeek}
          toggleExpanded={toggleExpanded}
        />
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  competitionContainer: {
    marginBottom: 20,
  },
  weekHeading: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  weekDate: {
    fontSize: 16,
    marginVertical: 2,
  },
  eventButton: {
    padding: 10,
    backgroundColor: '#ddd',
    borderRadius: 5,
    marginVertical: 5,
  },
  eventButtonText: {
    fontSize: 16,
  },
  numberOfEvents: {
    fontSize: 14,
    marginTop: 5,
  },
});

export default CompetitionList;