import {Link} from "react-router-dom";
import {useState} from "react";
import {connect} from "react-redux";
import {actionPlaylistFindByOwner} from "../../actions";
import {store} from "../../reducers";
import {actionCreatePlaylist} from "../../actions";

const Playlist = ({playlist:{_id, name}={}}) => {
    return (
        <div>
            {name !== null ? ( <div className='list1a-li'><Link to={`/myPlaylist/${_id}`}>{name}</Link></div>) : <></>}
        </div>
    )

}
const MyPlaylists =  ({playlists={},createPlaylist}) => {
    const [p, setP] = useState ('')
    return (
        <div className='my-playlists'>
            <input placeholder='Имя плейлиста' onChange={e => setP(e.target.value)}/>
            <button disabled={p.length >= 6  && p !== "" ? false : true} onClick={()=>createPlaylist(p)}>Создать</button>
            <div className="list1a">
                {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
            </div>
        </div>
    )
}

export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),
    {createPlaylist:actionCreatePlaylist})(MyPlaylists)