import React from 'react';
import { View, Modal, Text, TouchableOpacity } from 'react-native';
import AppText from '@/components/AppText';
import { useUsers } from '@/contexts/UserContext';

interface PopupProps {
  isVisible: boolean;
  onClose: () => void;
}

const UsernamePopUp: React.FC<PopupProps> = ({ isVisible, onClose }) => {
  const { users, currentUser, changeCurrentUser } = useUsers();

  const handleSelect = (username: string) => {
    changeCurrentUser(username);
    onClose();
  };

  return (
    <Modal visible={isVisible} transparent>
      <TouchableOpacity
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
        }}
        activeOpacity={1}
        onPress={onClose}
      >
        <TouchableOpacity activeOpacity={1}>
          <View
            style={{
              width: 300,
              backgroundColor: 'white',
              borderRadius: 10,
              padding: 16,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <AppText
              text="Changer de profil"
              style={{ fontSize: 18, fontWeight: 'bold', fontStyle : "italic", marginBottom: 16 }}
            />

            {users.map((u, index) => (
              <TouchableOpacity
                key={index}
                onPress={() => handleSelect(u.username)}
                style={{
                  paddingVertical: 10,
                  paddingHorizontal: 20,
                  marginVertical: 4,
                  borderRadius: 8,
                  backgroundColor: u.username === currentUser?.username ? '#f0f0f0' : '#fff',
                  borderWidth: 1,
                  borderColor: '#ddd',
                  width: '100%',
                  alignItems: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 20,
                    color: u.username === currentUser?.username ? '#aaa' : '#E8437B',
                  }}
                >
                  {u.username}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
};

export default UsernamePopUp;