import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import Button from '@/components/Button';
import SymptomSelectionModal from '@/components/popUp/SymptomSelectionModal';
import { parsedSymptoms } from '@/constants/constants'; // Assuming parsedSymptoms is correctly imported
import { Symptome } from '@/constants/type';
import { useUsers } from '@/contexts/UserContext';
import i18n from '@/i18n/config';
import colors from '@/styles/colors';
import { useAppData } from '@/contexts/AppDataContext';


const IndexScreen: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      {/* Buttons */}
      <Button
        text={i18n.t('home.button_suivi_cours')}
        style={styles.button}
        onPress={() => console.log('suivi_en_cours')}
        href='suivi_en_cours'
      />
      <Button
        text={i18n.t('home.button_lancer_suivi')}
        style={styles.button}
        onPress={() => console.log('lancer_un_suivi')}
         href='lancer_un_suivi'
      />
      {/* <Button
        text={i18n.t('home.button_lancer_generique')}
        style={styles.button}
        onPress={() => console.log('lancer_un_suivi_generique')}
      /> */}
      <Button
        text={i18n.t('home.button_suivi_perso')}
        style={styles.button}
        onPress={() => setModalVisible(true)} // Open modal when this button is clicked
      />
      <Button
        text={i18n.t('home.button_arreter_suivi')}
        style={styles.button}
        onPress={() => console.log('arreter_un_suivi')}
        href='arreter_un_suivi'
      />

      {/* SymptomSelectionModal */}
      <SymptomSelectionModal
        visible={modalVisible}
        onClose={() => setModalVisible(false)} // Close modal when onClose is called
        symptoms={parsedSymptoms} // Pass your symptoms array here
        />
    </View>
  );
};

export default IndexScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
    // backgroundColor: colors.white, // Optional: Add padding for better spacing
  },
  button: {
    minWidth: '90%',
    marginVertical: 10, // Optional: Add margin between buttons
  },
});