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


type Post = {
    uid: string;
    spotifyData: any;
    created: string;
    location: string;
    username: string;
}

let dataRetrieved = false;

export const Profile = () => {
    const navigate = useNavigate();
    const api = useApi();
    const signInLink = api.getSpotifyLoginLink();
    const [feedItems, setFeedItems] = useState<Post[]>([]);
    const [spotifyToken, setSpotifyToken] = useState<string | null>(null);
    const [reloadFeedItems, setReloadFeedItems] = useState(false);

    const getFeed = async () => {
        const feed = await api.getOwnPosts();
        setFeedItems([...feed]);
    };

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

    useEffect(() => {
        if (reloadFeedItems) {
            getFeed();
            setReloadFeedItems(false);
        }
    }, [reloadFeedItems]);

    useEffect(() => {
        const token = api.getCurrentSpotifyToken();
        setSpotifyToken(token);
    }, [api])

    const handleSignOut = () => {
        api.signOut();
        navigate("/login");
    };

    const handleSpotifySignOut = () => {
        api.spotifyLogout();
        setSpotifyToken(null);
    }

    return (
        <div>
            <div style={{ position: "relative" }}>
                <Header title="YourJams." />
            </div>
            {spotifyToken ? (
                <div>
                    <button onClick={handleSpotifySignOut}>Disconnect Spotify</button>
                </div>
            ) : (
                <a href={signInLink}>
                    <button className="spotify-button">Sign in to Spotify</button>
                </a>
            )}

            <div style={{ marginTop: "10px" }}>
                <button onClick={handleSignOut}>Sign Out</button>
                <button onClick={() => {setReloadFeedItems(true)}}>Refresh Posts</button>
            </div>
            <div className="feed" style={{ padding: "10px" }}>
                <h2>Own Posts:</h2>
                {feedItems.map((feed) => (
                    <div key={feed.uid} className="song-item">
                        <div className="song-info">
                            <p className="feed-name">{feed.username}</p>
                            <p className="feed-location">Posted at: {feed.location}</p>
                            <div className="song-details">
                                <div className="song-image">
                                    <img src={feed.spotifyData.image} alt="" />
                                    <a className="spotify-button" href={feed.spotifyData.url}>Listen on Spotify</a>
                                </div>
                                <div className="song-data">
                                    <p className="song-title">{feed.spotifyData.name}</p>
                                    <p className="song-album">{feed.spotifyData.album}</p>
                                    <p className="song-artist">{feed.spotifyData.artist}</p>
                                    {/*<p className="song-date">{toDateTime(feed.created.seconds)}</p>*/}
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};