import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { useUsers } from '@/contexts/UserContext';
import { Pathologie } from '@/constants/type'; // Adjust the import as per your type definition
import fonts from '@/styles/fonts';
import { router } from 'expo-router';
import { useAppData } from '@/contexts/AppDataContext';


const SuiviScreen: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { currentUser } = useUsers();

  // Filter non-ended suivi
  const nonEndedSuivi: Pathologie[] = currentUser.suivi.filter((pathology) => !pathology.ended);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Suivi en cours</Text>
      {nonEndedSuivi.length === 0 ? (
        <Text style={styles.noSuiviText}>Aucun suivi actif.</Text>
      ) : (
        <FlatList
          data={nonEndedSuivi}
          keyExtractor={(item) => item.id.toString()} // Assuming each item has a unique identifier
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => router.push({
              pathname: '/assess',
              params: { id_suivi: item.id }
            })}>
            <View style={styles.pathologyContainer}>
              <Text style={styles.pathologyName}>{item.name}</Text>
              <Text style={styles.pathologyName}>{item.evaluateur}</Text>
            </View>
            </TouchableOpacity>
          )}
           // Display FlatList items horizontally
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: fonts.title.fontSize,
    fontFamily: fonts.title.fontFamily,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  noSuiviText: {
    fontSize: fonts.title.fontSize,
    fontFamily: fonts.title.fontFamily,
    textAlign: 'center',
    marginTop: 50,
  },
  pathologyContainer: {
    flexDirection: 'row', // Display items in row
    justifyContent: 'space-between', // Adjust as per your layout requirements

    marginBottom: 10,
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    width: '100%', // Ensure each item takes full width
    maxWidth: 300, // Adjust as needed based on your design
    marginRight: 10, // Add margin between items
  },
  pathologyName: {
    fontSize: fonts.subtitle.fontSize,
    fontFamily: fonts.title.fontFamily,
    fontWeight: 'bold',
  },
});

export default SuiviScreen;