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 Post = {
    uid: string;
    spotifyData: any;
    created: any;
    location: string;
    username: string;
}

export const Home = () => {
    const navigate = useNavigate();
    const queryParams = new URLSearchParams(location.search);
    const code = queryParams.get('code');

    useEffect(() => {
        if (code !== null && localStorage.getItem('token') === null) {
            navigate(`../test/?code=${code}`, { replace: true })
        }
    }, []);

    const api = useApi();
    const [feedItems, setFeedItems] = useState<Post[]>([]);
    const [reloadFeedItems, setReloadFeedItems] = useState(false);

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


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

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


    const createPost = async () => {
        setReloadFeedItems(await api.createPost());
    }

    function toDateTime(seconds: any): string {
        var t = new Date(1970, 0, 1); // Epoch
        t.setSeconds(seconds);
        return t.toString();
    }

    return (
        <div>
            <div style={{ position: 'relative' }}>
                <Header title="YourJams." showFriends={true} showSpotify={true} showProfile={true} />
            </div>
            <button onClick={() => {setReloadFeedItems(true)}}>Refresh Feed</button>
            <p style={{ fontSize: "12px" }}>Disclaimer: How posting works is you hit the post current song button when you are listening to a song
                on spotify while having your account connected!</p>
            <button onClick={createPost}>Post Current Song</button>
            <div className="feed" style={{ padding: "10px" }}>
                <h2>Feed:</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>
    );
};