// Повестка дня: как листать треки в плейлисте?
// общее у всех это id,йлиста свой. arr принимает значение одного плейлиста в один такт(шаг программы)
// так вот, пдопустим, моджно ли листать кнопками треки ориентируясь на id плейлиста: если есть треки, то
// листай, если нет, то кнопка задисейблена. И как это реализовать так, что бы треки листалисть в рамках одного плейлиста., когда мы кликаем по нему(плейлисту0)
// выпадают треки, а значит что типа по клику мы формируем массив из треков плейлиста, а затем его передаем в player

import React, { useState, useEffect } from "react";


// import { Track } from "./Track";
import { PlaylistTracks, 
  playlistsItemTrack
  // playlistFilteredTracks 
} from "./Tracks";
import {
  getPlaylist,
  // setTrack,
  setCurrentTrack,
  actionPlaylistTrackPressed,
  // oneTrackFind,
  // actionSetTrack,
} from "../actions/playerActions";
import { connect } from "react-redux";
// import * as actions from "../constants/actions/index";
import Player from "./Player";
// import Library from "./Library";
// import store from "../store";


import { Spin } from "antd";

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

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



const Playlist = ({
  pressedTracks,
  actionPlaylistTrackPressed,
  playlistsItemTrack,
  // playlistFilteredTracks,
  actionOneTrackFind,
  actionSetTrack,
  state,
  getPlaylist,
  setTrack,
  playlists = [],
  // track,
  playlistitem,
  highlighted,
  setCurrentTrack,
  currentTrack,
  oneTrackFind,
}) => {
  // const [getTrack, setGetTrack] = useState([]);

  // console.log(state.player.playlists);

  // console.log("playlistsItemTrack: 0", playlistsItemTrack)

  let playlistFilteredTracks = [];

  useEffect(() => {
    getPlaylist && getPlaylist();
  }, []);
  console.log("playlists in Playlist: ", playlists);
  useEffect(() => {
    setTrack && setTrack();
  }, []);
  // playlistFilteredTracks = playlistsItemTrack;
  // console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks);
  return (
    <div className="wrapper">
      <Header />
      {!playlists.length && (
        <div className="container">
          <Spin size="large" tip="loading..."/>
        </div>
      )}
      <div className="main">
        <div className="trackList">
          <ul className="playlists">
            {/* onClick={(item)=>{item.tracks}} */}
            {playlists.map((playlistsItem, index) =>
              playlistsItem 
              // &&
              // playlistsItem.tracks 
              // &&
              // playlistsItem.tracks.length > 0 
              ? (
                // <p>
                  <PlaylistTracks
                  key={index}
                  actionPlaylistTrackPressed={actionPlaylistTrackPressed}
                    playlistsItem={playlistsItem}
                    actionOneTrackFind={actionOneTrackFind}
                    playlistFilteredTracks={playlistFilteredTracks}
                    pressedTracks={pressedTracks}
                    highlighted = {  highlighted  }
                  />
                // </p>
              ) : (
                ""
              )
            )}
          </ul>
        </div>
      </div>
      {/* {console.log("playlistFilteredTracks in Playlist: ", playlistFilteredTracks)} */}
      {/* <Player track={playlistFilteredTracks} /> */}
      {/* <Player track={getTrack} /> */}
      <Player pressedTracks={pressedTracks}/>
       {/* works */}
      {/* <Player playlist={playlist} /> */}
      {/* <Player playlist={tracks} /> */}
      <Footer />
    </div>
  );
};

// const mapDispatchToProps = (dispatch) => ({
//   getPlaylist: () => dispatch(getPlaylist()),
//   // oneTrackFind: ()=> dispatch(oneTrackFind()),
//   actionOneTrackFind: oneTrackFind,

//   // setTrack: () => dispatch(setTrack),
// });

// const mapDispatchToProps2 = {
//   getPlaylist: getPlaylist,
//   actionOneTrackFind: oneTrackFind,
//   setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
// };

const mapStateToProps = (state) => ({
  playlists: state && state.player && state.player.playlists,
  state: state,
  // tracks: state.player.tracks,
  currentTrack: state.player.currentTrack,
  // playlist: state.player.playlist,
  // track: state.player.track,
  // login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
  pressedTracks: state.player.pressedTracks,
});

// const mapStateToProps = (state) => ({
//   tracks: state.player.tracks,
//   currentTrack: state.player.currentTrack,
//   login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
// });

const mapDispatchToProps = (dispatch) => ({
  // getPlaylist: ()=>setTimeout(() => dispatch(getPlaylist()), 2000),
  getPlaylist: () => dispatch(getPlaylist()),
  setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
  actionPlaylistTrackPressed: (pressedTracks) => dispatch(actionPlaylistTrackPressed(pressedTracks))
});

// export default connect(mapStateToProps, mapDispatchToProps2)(Playlist);
export default connect(mapStateToProps, mapDispatchToProps)(Playlist);
