import {actionCreatePlaylist, actionPlaylistFindByOwner, backURL} from "../actions";
import {connect} from "react-redux";
import {Link} from "react-router-dom";
import {call, select, takeEvery} from "redux-saga/effects";
import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
import {useState} from "react";
import {history} from "../App";
import {store} from "../reducers";
import {CTrack} from "./player";
import {CTrackDropZone} from "./pageMain";


const Track = ({track:{_id,url,originalFileName}={}}) =>
    <div className='Tracks'>
        <audio controls src={backURL+'/'+url}></audio> <strong>{originalFileName}</strong>
    </div>

const MyTracks = ({tracks}={}) =>
    <div>
        {(tracks || []).map(track => <Track track={track}/>)}
    </div>

const CMyTracks = connect(state => ({tracks: state.promise.trackFindByPlaylist?.payload || []}))(MyTracks)


export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
    <>
        <h1>{_id}</h1>
        <CTrackDropZone />
        <CMyTracks />
    </>


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

const MyPlaylists =  ({playlists={},onCreatePlaylist}) => {
    const [p, setP] = useState ('')
return (
    <div>
    <input placeholder='Название' onChange={e => setP(e.target.value)}/>
        <button onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
    <ul className='Users'>
        {playlists.map(playlist =>  <Playlist playlist={playlist}/> )}
    </ul>
    </div>
)
}

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

store.dispatch(actionPlaylistFindByOwner())