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 Player from "./Player";
import { findMyPlaylists, createMyPlaylist } from "../actions/playerActions";

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 = [],
}) => {
  const [playlistName, setPlaylistName] = useState("");
  const [buttonClick, setButtonClick] = useState(false);


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

  // let owner = localStorage.user;
  // let id = localStorage.id;
  // uploadTrack.onsubmit = async (e) => {
  //   e.preventDefault();

  //   let response = await fetch('/article/formdata/post/user-avatar', {
  //     method: 'POST',
  //     body: new FormData(formElem)
  //   });

  //   let result = await response.json();

  //   alert(result.message);
  // };

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

  return (
    <>
      <Header />
      {!showMyPlaylists.length && (
        <div className="container">
          <Spin size="large" tip="loading..." />
        </div>
      )}
      <div className="main">
        <div className="my_playlists">
          <div className="my_playlists_list">
            <h2>My playlists</h2>
            <ul>
              {showMyPlaylists.map((playlist, item) => (
                    <li>{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>
        <form id="formElem">
          <h2>Add track</h2>
          <input type="file" name="track" id="track" />
        </form>
      </div>
      <Footer />
    </>
  );
};

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

const mapDispatchToProps = (dispatch) => ({
  createMyPlaylist: (playlistName) => dispatch(createMyPlaylist(playlistName)),
  findMyPlaylists: () => dispatch(findMyPlaylists()),
});

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