import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
// import * as actions from "../constants/actions/index";
// import store from "../store";
// import Library from "./Library";
import { Spin } from "antd";

import  AddTrack  from "./AddTrack";
import Player from "./Player";
import {
  findMyPlaylists,
  createMyPlaylist,
  findCurrentPlaylist,
} from "../actions/playerActions";
// actionMyCurPlaylist  need to delete

import Header from "./Header";
import Footer from "./Footer";

import "../styles/library.css";
import "../styles/playlists.css";
import "../styles/MyPlaylists.css";

const MyPlaylists = ({
  createMyPlaylist,
  findMyPlaylists,
  showMyPlaylists = [],
  findCurrentPlaylist,
  playlist = [],
}) => {
  const [playlistName, setPlaylistName] = useState("");
  const [buttonClick, setButtonClick] = useState(false);

  // const [currentPlaylist, setCurrentPlaylist] = useState([]);

  console.log("showMyPlaylists in MyPlaylists: ", showMyPlaylists);

  useEffect(() => {
    findMyPlaylists();
  }, [buttonClick]); //вызывая функцию findMyPlaylists через useEffect можно получить ошибку при переходе из страницы мои плейлисты на страницу все плейлисты

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



  return (
    <>
      <Header />
      <div className="main">
        <div className="my_playlists">
          <div className="my_playlists_list">
            <h2>My playlists</h2>
            <ul>
              {/* {!showMyPlaylists.length && (
                <div className="container">
                  <Spin size="large" tip="loading..." />
                </div>
              )} */}
              {
              !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>
          <input
            type="text"
            placeholder="Enter the name of playlist"
            onChange={(e) => setPlaylistName(e.target.value)}
          />
          <button
            onClick={() =>
              playlistName
                ? createMyPlaylist(playlistName) &&
                  setButtonClick(() => !buttonClick) &&
                  console.log("onClick is run")
                : console.log("i dont know")
            }
          >
            Add new playlist
          </button>
        </div>
        <AddTrack myPlaylist={playlist} />
      </div>
      {playlist.tracks !==null? <Player playlist={playlist.tracks} /> : ""}
      <Footer />
    </>
  );
};

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)(MyPlaylists);
