import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { useTailwind } from 'tailwind-rn';
import AsyncStorage from '@react-native-async-storage/async-storage';

function UserProfileScreen({ route, navigation }) {
    const { userId } = route.params; // get the user ID from the parameters
    const [username, setUsername] = useState('');
    const [following, setFollowing] = useState([]);
    const tailwind = useTailwind();
  
    console.log(userId)

    async function fetchUserData() {
        const token = await AsyncStorage.getItem('token');
        const apiUrl = await AsyncStorage.getItem('apiEndpoint')

        const response = await fetch(`${apiUrl}/api/v1/app/user/data/${userId}`, {
          headers: { 'Authorization': token },
        });

        if (!response.ok) {
            console.error(`Error: ${response.status}`);
            return;
          }

        const user = await response.json();
        console.warn("user: ", user)
        setUsername(user.username);
        setFollowing(user.following.count);
      }

      useEffect(() => {
        fetchUserData();
      }, []);

      async function followUser() {
        const token = await AsyncStorage.getItem('token');
        const apiUrl = await AsyncStorage.getItem('apiEndpoint')

        console.log(userId)
        const response = await fetch(`${apiUrl}/api/v1/app/user/follow/${userId}`, {
          method: 'POST',
          headers: { 'Authorization': token },
        });
        const data = await response.json();
        setFollowing(data.count);
        console.log('followed')
        // Update the user state to reflect the new following status
      }
      

  async function unfollowUser() {
    const token = await AsyncStorage.getItem('token');
    const apiUrl = await AsyncStorage.getItem('apiEndpoint')

    const response = await fetch(`$[apiUrl}/api/v1/app/user/unfollow/${userId}`, {
      method: 'POST',
      headers: { 'Authorization': token },
    });
    if (response.ok) {
        const data = await response.json();
        console.warn(data)
        setFollowing(data.count)
    }

    
    // Update the user state to reflect the new following status
    
  }

  if (!username) return null;

  return (
    <View style={tailwind('p-4')}>
      <Text style={tailwind('text-lg')}>@{username}</Text>
      {/* Display the user's swits here */}
      <Button title="Follow" onPress={followUser} />
      <Button title="Unfollow" onPress={unfollowUser} />
      <Text>Following: {following}</Text>

      <Button
        title="Message"
        onPress={() => navigation.navigate('Conversation', { userId })}
      />
    </View>
  );
}

export default UserProfileScreen;