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";

export const Spotify = () => {
    const navigate = useNavigate();
    const api = useApi();
    const signInLink = api.getSpotifyLoginLink();
    const [spotifyToken, setSpotifyToken] = useState<string | null>(null);

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

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

    return (
        <div>
            <div id="spotifyHeader">
                <Header title="YourJams." />
            </div>
            <div>
                <h1>Make sure to sign into your Spotify Account!</h1>
                <div>
                    {spotifyToken ? (
                        <div>
                            <button onClick={handleSpotifySignOut}>Disconnect Spotify</button>
                        </div>
                    ) : (
                        <a href={signInLink}>
                            <button className="spotify-button">Sign in to Spotify</button>
                        </a>
                    )}
                </div>             
            </div>
        </div>
    )
}