import React, { useState } from 'react';
import { TamaguiProvider, Stack, Input, Button, Text, useToast } from 'tamagui';

const AddFriendScreen = () => {
  const [friendUsername, setFriendUsername] = useState('');
  const [error, setError] = useState('');
  //const toast = useToast();

  const handleAddFriend = async () => {
    if (!friendUsername.trim()) {
      setError('Username cannot be empty.');
      return;
    }

    try {
      const yourAuthToken = localStorage.getItem("jwtToken");
      const response = await fetch("http://localhost:4000/friend-request", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${yourAuthToken}`, // Include the auth token if required by your `authenticate` middleware
        },
        body: JSON.stringify({ receiverUsername: friendUsername }),
      });

      if (!response.ok) {
        const errorText = await response.text();
        //toast.show(errorText || "Error sending friend request", { type: 'error' });
        return;
      }

      const result = await response.json();
      console.log(result)
      //toast.show("Friend request sent successfully", { type: 'success' });
      setFriendUsername(''); // Clear the input field
    } catch (error) {
      console.error("Error sending friend request:", error);
      //toast.show("Failed to send friend request", { type: 'error' });
    }
  };

  return (
    <TamaguiProvider>
      <Stack f={1} justifyContent="center" alignItems="center" space="$4" padding="$4">
        <Text fontSize="$6" fontWeight="bold">
          Add a Friend
        </Text>

        <Input
          placeholder="Enter friend's username"
          value={friendUsername}
          onChangeText={setFriendUsername}
          borderColor={error ? 'red' : '$borderColor'}
          borderWidth={2}
          borderRadius="$4"
          padding="$3"
        />

        {error ? (
          <Text color="red" fontSize="$2">
            {error}
          </Text>
        ) : null}

        <Button onPress={handleAddFriend} backgroundColor="$primary" color="white">
          Send Friend Request
        </Button>
      </Stack>
    </TamaguiProvider>
  );
};

export default AddFriendScreen;