import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Modal, Pressable } from 'react-native';
import { useRouter } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';
import AppText from '@/components/AppText';
import i18n from '@/i18n/config';
import Button from '@/components/Button';
import ProfileAskPersonal from '@/components/ProfileAskPersonnal';
import { useUsers } from '@/contexts/UserContext';
import { parsedSymptoms } from '@/constants/constants';
import symptomsJSON from '@/assets/json/symptomes.json'

type ModalProps = {
    visible: boolean;
    onClose: () => void;
  };

export default function AdministrativeDataScreen({ visible , onClose} : ModalProps) {
  const { isAuthenticated } = useAuth();
  const router = useRouter();
  const { currentUser, updateCurrentUser } = useUsers();
  const [isUpdated, setIsUpdated] = useState(false);

  const [textInputValues, setTextInputValues] = useState({
    nom: currentUser?.nom || '',
    birthDate: currentUser?.birthDate || '',
    prenom: currentUser?.prenom || '',
    code: currentUser?.code || '',
    tel: currentUser?.tel || '',
    mail: currentUser?.mail || '',
  });


  const handleLogin = async () => {
    updateCurrentUser(textInputValues);
  };

 
  
  useEffect(() => {
    if (currentUser) {
      setTextInputValues({
        nom: currentUser.nom || '',
        birthDate: currentUser.birthDate || '',
        prenom: currentUser.prenom || '',
        code: currentUser.code || '',
        tel: currentUser.tel || '',
        mail: currentUser.mail || '',
      });
    }
  }, [currentUser]);
  const handleTextInputChange = (key: string, value: string) => {
    setTextInputValues(prevValues => ({
      ...prevValues,
      [key]: value,
    }));
  };

  return (
      <Modal
        animationType="slide"
        transparent={true}
        visible={visible}
        onRequestClose={() => {
          onClose();
        }}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.last_name')}
              onTextChange={(value) => handleTextInputChange('nom', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Nom")?.unit}
              initValue={textInputValues.nom}
              displayPersonal={true}
            />

            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.birth_date')}
              onTextChange={(value) => handleTextInputChange('birthDate', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Date de naissance")?.unit}
              initValue={textInputValues.birthDate}
              displayPersonal={false}
            />

            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.first_name')}
              onTextChange={(value) => handleTextInputChange('prenom', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Prénom")?.unit}
              initValue={textInputValues.prenom}
              displayPersonal={false}
            />

            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.code')}
              onTextChange={(value) => handleTextInputChange('code', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Code Utilisateur")?.unit}
              initValue={textInputValues.code}
              displayPersonal={false}
            />

            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.phone_number')}
              onTextChange={(value) => handleTextInputChange('tel', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Téléphone")?.unit}
              initValue={textInputValues.tel}
              displayPersonal={false}
            />

            <ProfileAskPersonal
              nameText={i18n.t('login.basic_data.mail')}
              onTextChange={(value) => handleTextInputChange('mail', value)}
              inputPlaceholder={parsedSymptoms.find(s=>s.name == "Mail")?.unit}
              initValue={textInputValues.mail}
              displayPersonal={false}
            />

            <Button
              text={i18n.t('commons.validate')}
              isSelected={true}
              onPress={() => {handleLogin(); onClose();}}
            />
          </View>
        </View>
      </Modal>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalContent: {
    width: '90%',
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    elevation: 10,
  },
  inputContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingTop: 20,
  },
  textInput: {
    width: 230,
    height: 30,
    borderRadius: 1.5,
    borderColor: '#000',
    borderWidth: 1,
    shadowColor: 'transparent',
    paddingHorizontal: 10,
    fontSize: 12,
    textAlignVertical: 'center',
  },
  label: {
    fontSize: 15,
  },
});