import React, { useEffect } from 'react'
import './home.css'
import Sidebar from '../sidebar/Sidebar'
import Navbar from '../navbar/Navbar'
import Main from '../main/Main'
import MusicPlayer from '../musicPlayer/MusicPlayer'
import { useStateProvider } from '../../util/StateProvider'
import axios from 'axios'
import { reducerCases } from '../../util/Constants'

const Spotify = () => {
  const [{token}, dispatch] = useStateProvider();
  
  useEffect(() => {
    const getUserInfo = async () => {
      const {data} = await axios.get('https://api.spotify.com/v1/me', {
        headers:{
          Authorization:"Bearer "+token,
          "Content-Type": "application/json"
        },
      });
      const userInfo = {
        userId: data.id,
        userName: data.display_name,
      };
      dispatch({type: reducerCases.SET_USER, userInfo})
    };
    getUserInfo();    
  }, [dispatch, token])


  return (
    <>
      <div className="Home">
        <div className="home-sidebar"><Sidebar/></div>
        <div className="home-nav">
          <Navbar/>
        </div>
        <div className="home-main">
          <Main/>
        </div>
        <div className="home-musicPlayer"><MusicPlayer/></div>
      </div>
    </>
  )
}

export default Spotify