import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Spotify from 'spotify-web-api-js';

const spotifyWebApi = new Spotify();

class App extends Component{
  constructor(){
    super();
    const params = this.getHashParams();
    this.state ={
        loggedIn: params.access_token ? true : false,
        nowPlaying: {
          name: 'Not Checked',
          image: '',
        },
        data: resoponseArray.map(item => {description: item.description, timeM: item.timeM}),
        playlists:{
          name: 'Not Checked',
          id: 'Not Checked'
        }
    }
    if (params.access_token){
      spotifyWebApi.setAccessToken(params.access_token);
    }
  }
  /**
   * Obtains parameters from the hash of the URL
   * @return Object
   */
  getHashParams() {
      var hashParams = {};
      var e, r = /([^&;=]+)=?([^&;]*)/g,
          q = window.location.hash.substring(1);
      while ( e = r.exec(q)) {
          hashParams[e[1]] = decodeURIComponent(e[2]);
      }
      return hashParams;
  }

  getNowPlaying(){
    spotifyWebApi.getMyCurrentPlaybackState()
      .then((response) => {
        this.setState({
          nowPlaying: {
            name:response.item.name,
            image: response.item.album.images[0].url
          }
        })
      })
  }

  getUserPlaylists(){
    spotifyWebApi.getUserPlaylists('escher8')
      .then((response) => {
        console.log('Playlists', response);

         this.setState({
          playlists: {
            name: response.items[0].name,
            id: response.items[0].id
          }
        })

        spotifyWebApi.getPlaylist('7K0UB4wqdztK4jc3nrw9an')
          .then((response) => {
            console.log('PlaylIST', response);
          })
      })
  }

  render(){
      return (
        <div className="App">
          <a href = "http://localhost:8888">
            <button>Login with Spotify</button>
          </a>

          <div> Now Playing: {this.state.nowPlaying.name}</div>
          <div>
            <img src={this.state.nowPlaying.image } style={{width:100}}/>
          </div>
          <button onClick={() => this.getNowPlaying()}>
            Check Now Playing
          </button>

          <div> Playlists: {this.state.playlists.name} (id: {this.state.playlists.id})</div>
          <button onClick={() => this.getUserPlaylists()}>
            Get Playlists
          </button>

        </div>
      );
    }
}

export default App;