import React, { useEffect, useState } from "react";
import {
  findMyPlaylists,
  findCurrentPlaylist
} from "../actions/playerActions";
import { connect } from "react-redux";
import { Spin } from "antd";


const AddTrackFromLibToPlaylist = ({
  findMyPlaylists,
  findCurrentPlaylist,
  showMyPlaylists=[],
  playlist = []
}) => {
  const [buttonClick, setButtonClick] = useState(false);
  console.log("showMyPlaylists in AddTrackFromLibToPlaylist: ", showMyPlaylists);

  // useEffect(() => {
  //   findMyPlaylists();
  // }, [buttonClick]);

  useEffect(() => {
    findMyPlaylists();
  }, []);

  function currentPlaylist(id) {
    findCurrentPlaylist(id);
  }

  return (
  <>
            <div className="my_playlists_list">
            <ul>
            {
              !showMyPlaylists.length ? (
                <div className="container">
                  <Spin size="large" tip="loading..." />
                </div>
              ) : (
                showMyPlaylists.map((playlist, index) => (
                  playlist.name ? 
                  <li key={index.toString()}
                    onClick={() => {
                      localStorage.lastPLaylist = playlist._id;
                      currentPlaylist(localStorage.lastPLaylist);
                    }}
                  >
                    {playlist.name}
                  </li> : ""
                ))
              )}
            </ul> 
            </div>

  </>
  );
};

const mapStateToProps = (state) => ({
  showMyPlaylists: state.player.showMyPlaylists,
  playlist: state.player.playlist,
});

const mapDispatchToProps = (dispatch) => ({
  // createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
  findMyPlaylists: () => dispatch(findMyPlaylists()),
  findCurrentPlaylist: () =>
    dispatch(findCurrentPlaylist(`${localStorage.lastPLaylist}`)),
});

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