import React, { useState } from 'react';
import { View, Image, TouchableOpacity, StyleSheet, ActivityIndicator, Alert } from 'react-native';
import { Camera, UserCircle } from 'lucide-react-native';
import useTradeStore from '@/store/useTradeStore';

// Temporarily remove Firebase imports until Firebase is properly installed
// import { useAuth } from '@/hooks/useAuth';

interface ProfileImagePickerProps {
  size?: number;
}

const ProfileImagePicker: React.FC<ProfileImagePickerProps> = ({ size = 100 }) => {
  const [loading, setLoading] = useState(false);
  const { userProfile, updateUserProfile } = useTradeStore();
  
  // Temporarily comment out Firebase auth hook
  // const { selectProfileImage, updateProfile } = useAuth();
  
  const handleSelectImage = async () => {
    if (!userProfile.isLoggedIn) {
      return;
    }
    
    setLoading(true);
    
    try {
      // Temporarily use mock image selection instead of Firebase
      // const result = await selectProfileImage();
      
      // Mock successful image selection
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Mock image URL
      const mockImageUrl = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8fDA%3D&w=1000&q=80';
      
      // Update profile with new image
      updateUserProfile({
        avatar: mockImageUrl
      });
      
      console.log('Profile image updated');
    } catch (error) {
      console.error('Error selecting image:', error);
      Alert.alert('Error', 'Failed to select image. Please try again.');
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <View style={styles.container}>
      {userProfile.avatar ? (
        <Image 
          source={{ uri: userProfile.avatar }} 
          style={[styles.profileImage, { width: size, height: size, borderRadius: size / 2 }]} 
        />
      ) : (
        <View style={[styles.placeholderContainer, { width: size, height: size, borderRadius: size / 2 }]}>
          <UserCircle size={size * 0.8} color="#ccc" />
        </View>
      )}
      
      <TouchableOpacity 
        style={[styles.cameraButton, { bottom: 0, right: 0 }]} 
        onPress={handleSelectImage}
        disabled={loading || !userProfile.isLoggedIn}
      >
        {loading ? (
          <ActivityIndicator size="small" color="#fff" />
        ) : (
          <Camera size={16} color="#fff" />
        )}
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  profileImage: {
    backgroundColor: '#f0f0f0',
  },
  placeholderContainer: {
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraButton: {
    position: 'absolute',
    backgroundColor: '#29ABE2',
    width: 32,
    height: 32,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#fff',
  },
});

export default ProfileImagePicker;