import { useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ApiContext } from "../contexts/api";
import { useApi } from "../hooks/useApi";
import { Header } from '../components/Header';

type Friend= {
    username: string;
}

export const Friends = () => {
    const api = useApi();
    const [username, setUsername] = useState("");
    const [friends, setFriends] = useState([] as Friend[]);
    const [reloadFriends, setReloadFriends] = useState(false);

    useEffect(() => {
        setReloadFriends(true);
    }, []);

    useEffect(() => {
        if (reloadFriends) {
            fetchFriends();
            setReloadFriends(false);
        }
    }, [reloadFriends]);


    const fetchFriends = async () => {
        const fetchedFriends = await api.getFriends();
        setFriends(fetchedFriends);
    };

    const handleAddFriend = async () => {
        const success = await api.addFriend(username);
        if (success) {
            alert(`${username} was added successfully!`);
            friends.push({username: username});
        } else {
            alert(`There was an error adding ${username}.`);
        }
        setUsername("");
    };

    const handleRemoveFriend = async (removeFriendUsername: string, index: number) => {
        let tempArray = [...friends];
        tempArray.splice(index, 1);
        setFriends([...tempArray]);
        const response = await api.removeFriend(removeFriendUsername);
    }

    return (
        <div>
            <div style={{ position: "relative" }}>
                <Header title="YourJams." />
            </div>
            <button onClick={() => {setReloadFriends(true)}}>Refresh Friends List</button>
            <form onSubmit={(e) => {e.preventDefault(); handleAddFriend();}}>
                <label>
                    <div>
                        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
                        <button type="submit">Add Friend</button>
                    </div>
                </label>
            </form>
            <div>
                <h2>Friends:</h2>
                {friends.map((friend) => (
                    <div key={friend.username}>
                        <p>{friend.username}</p>
                        <button onClick={() => {
                            handleRemoveFriend(friend.username, friends.indexOf(friend));
                        }}>Remove Friend</button>
                    </div>
                    // <li key={friend.username}>{friend.username}</li>
                    
                ))}
            </div>
        </div>
    );
};