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

const Playlist = ({playlist:{_id, name}={}}) =>
    <li><Link to={`/myPlaylist/${_id}`}>{name}</Link></li>

const MyPlaylists =  ({playlists={}}) => {
    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}>Создать плейлист</button>
            <ul className='Playlists'>
                {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
            </ul>
        </div>
    )
}

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

store.dispatch(actionPlaylistFindByOwner())