import React, { useState, useEffect } from 'react';
import { View, Text, Modal, StyleSheet, ScrollView } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Symptome, Pathologie } from '@/constants/type'; // Import necessary types
import { useUsers } from '@/contexts/UserContext'; // Assuming this is where your context is used
import Button from '../Button';
import i18n from '@/i18n/config';

type SymptomSelectionModalProps = {
  visible: boolean;
  onClose: () => void;
  symptoms: Symptome[];
};

const SymptomSelectionModal = ({
  visible,
  onClose,
  symptoms,
}: SymptomSelectionModalProps) => {
  const { currentUser, updateCurrentUser } = useUsers(); // Assuming your context provides currentUser and updateCurrentUser

  const [selectedSymptoms, setSelectedSymptoms] = useState<Symptome[]>([]);

  useEffect(() => {
    // Initialize selectedSymptoms with currentUser.custom_suivi.symptoms when modal becomes visible
    if (visible && currentUser?.custom_suivi?.symptoms) {
      setSelectedSymptoms(currentUser.custom_suivi.symptoms);
    } else {
      setSelectedSymptoms([]);
    }
  }, [visible, currentUser]);

  const toggleSymptom = (symptom: Symptome) => {
    if (selectedSymptoms.some(s => s.id === symptom.id)) {
      setSelectedSymptoms(selectedSymptoms.filter(s => s.id !== symptom.id));
    } else {
      setSelectedSymptoms([...selectedSymptoms, symptom]);
    }
  };

  const handleSaveSymptoms = () => {
    if (currentUser) {
      const newPathologie: Pathologie = {
        id: 1000, // Example ID generation
        name: 'SuiviPerso', // Example name, you should replace with actual logic
        symptoms: selectedSymptoms,
      };

      // Update the currentUser with the new custom_suivi containing the newly created Pathologie
      updateCurrentUser({ custom_suivi: newPathologie });

      // Close the modal or handle any other logic as needed
      onClose();
    }
  };

  return (
    <Modal visible={visible} animationType="slide">
      <View style={styles.modalContainer}>
        <Text style={styles.title}>Selectionnez des éléments</Text>
        <ScrollView>
          {symptoms.map(symptom => (
            <View key={symptom.id} style={styles.checkboxContainer}>
              <CheckBox
                checked={selectedSymptoms.some(s => s.id === symptom.id)}
                onPress={() => toggleSymptom(symptom)}
              />
              <Text style={styles.symptomText}>{symptom.name}</Text>
            </View>
          ))}
        </ScrollView>
        <Button text={i18n.t('commons.validate')} onPress={handleSaveSymptoms} isSelected/>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  symptomText: {
    marginLeft: 10,
  },
});

export default SymptomSelectionModal;