import React  from 'react';
import ReactDOM from 'react-dom';
import SearchBar from '../SearchBar/SearchBar.js';
import SearchResults from '../SearchResults/SearchResults.js';
import Playlist from '../Playlist/Playlist.js';
import './App.css';
import Spotify from '../../utill/Spotify.js';

class App extends React.Component {
constructor(props) {
  super(props);
  this.state = ({
    searchResults: [
      'name': 'a',
      'artist':'b',
      'album': 'c'
  ],
    playlistName: '',
    playlistTrack: [
      'name': '',
      'artist':'',
      'album': '',
    ]
  });
  this.addTrack = this.addTrack.bind(this);
  this.removeTrack = this.removeTrack.bind(this);
  this.updatePlaylistName = this.updatePlaylistName.bind(this);
  this.savePlaylist = this.savePlaylist.bind(this);
  this.search = this.search.bind(this);
}

addTrack(track) {
        let tracks = this.state.playlistTracks;
        if (tracks.find(savedTrack => savedTrack.id === track.id)) {
            return;
        }
        tracks.push(track);
        this.setState({playlistTracks: tracks});

    }


removeTrack(track) {
    let playlistTracks = this.state.playlistTracks;
    let newPlaylistTracks = playlistTracks.filter(savedTrack => savedTrack.id !== track.id);
    this.setState({playlistTracks: newPlaylistTracks});
  }
updatePlaylistName(name) {
  this.setState({playlistName: name});
}

savePlaylist() {
  const trackURIs = this.state.playlistTracks.map(track => track.uri);
}

Spotify.search(term).then(results =>
  {this.setState({searchResults: results});
  console.log(term);
})

render() {
  return (<div>
  <h1>Ja<span className="highlight">mmm</span>ing</h1>
  <div className="App">
      <SearchBar onSearch = {this.search}/>
    <div className="App-playlist">
      <SearchResults SearchResults={this.state.searchResults  } onAdd = {this.addTrack}/>
      <Playlist playlistName = {this.playlistName} playlistTrack = {this.playlistTrack} onRemove = {this.removeTrack} onSave = {this.savePlaylist}/>
    </div>
  </div>
</div>);
}
};
export default App;