import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';

import Modal from './Modal';
import Icon from '../../components/Icon';
import Thumbnail from '../../components/Thumbnail';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import * as helpers from '../../helpers';

class AddToPlaylist extends React.Component {
  constructor(props) {
    super(props);

    if (!this.props.spotify_library_playlists) {
      this.props.spotifyActions.getLibraryPlaylists();
    }

    if (!this.props.mopidy_library_playlists && this.props.mopidy_connected) {
      this.props.mopidyActions.getLibraryPlaylists();
    }
  }

  playlistSelected(playlist_uri) {
    this.props.coreActions.addTracksToPlaylist(playlist_uri, this.props.uris);
    window.history.back();
  }

  render() {
    if (!this.props.playlists) return <div className="empty">No editable playlists</div>;
    let playlists = [];
    for (const uri in this.props.playlists) {
      if (this.props.playlists[uri].can_edit) playlists.push(this.props.playlists[uri]);
    }

    playlists = helpers.sortItems(playlists, 'name');

    let loader = null;
    if (this.props.spotify_library_playlists_status == 'running') {
      loader = (
        <div className="lazy-loader body-loader loading">
          <div className="loader" />
        </div>
      );
    }

    return (
      <Modal className="modal--add-to-playlist">
        <h1>Add to playlist</h1>
        <h2 className="mid_grey-text">
Select playlist to add
          {this.props.uris.length}
          {' '}
track
          {this.props.uris.length > 1 ? 's' : null}
          {' '}
to
        </h2>
        {playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
        <div className="list small playlists">
          {
						playlists.map((playlist) => (
  <div className="list__item" key={playlist.uri} onClick={() => this.playlistSelected(playlist.uri)}>
    <Thumbnail images={playlist.images} size="small" />
    <h4 className="list__item__name">{ playlist.name }</h4>
    <ul className="list__item__details details">
      <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
      <li>
        { playlist.tracks_total ? (
          <span className="mid_grey-text">
            { playlist.tracks_total }
            {' '}
tracks
          </span>
        ) : null }
      </li>
    </ul>
  </div>
						))
					}
        </div>
        {loader}
      </Modal>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  uris: (ownProps.match.params.uris ? decodeURIComponent(ownProps.match.params.uris).split(',') : []),
  mopidy_connected: state.mopidy.connected,
  mopidy_uri_schemes: state.mopidy.uri_schemes,
  mopidy_library_playlists: state.mopidy.library_playlists,
  mopidy_library_playlists_status: (state.ui.processes.MOPIDY_LIBRARY_PLAYLISTS_PROCESSOR !== undefined ? state.ui.processes.MOPIDY_LIBRARY_PLAYLISTS_PROCESSOR.status : null),
  spotify_library_playlists: state.spotify.library_playlists,
  spotify_library_playlists_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status : null),
  load_queue: state.ui.load_queue,
  me_id: (state.spotify.me ? state.spotify.me.id : false),
  playlists: state.core.playlists,
});

const mapDispatchToProps = (dispatch) => ({
  coreActions: bindActionCreators(coreActions, dispatch),
  uiActions: bindActionCreators(uiActions, dispatch),
  mopidyActions: bindActionCreators(mopidyActions, dispatch),
  spotifyActions: bindActionCreators(spotifyActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylist);