import {connect} from "react-redux";
import {CTrack} from "../track";
import {CPlaylistDropZone} from "../tools";
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import {arrayMoveImmutable} from 'array-move';
import {useState,useEffect} from "react";
import {CPreloaded} from "../preloader";
import {actionSetPlaylist} from "../../reducers";
const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
{name}
{(tracks || []).map(track => )}
const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
{setPlaylist: actionSetPlaylist})(MyTracks)
export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
<>
>
// const SortableItem = SortableElement(CTrack);
//
// const MyTracks = ( {children}) =>
//
// {children}
//
// const SortableList = SortableContainer(MyTracks)
// // const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
//
//
// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
// <>
//
//
//
//
//
// >
//
//
// function SortableComponent({tracks=[]}) {
// const [state, setState] = useState(tracks)
// useEffect(() => {
// setState (tracks)
// },[tracks])
// const onSortEnd = ({oldIndex, newIndex}) => {
// setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
// };
//
// return
// {state.map((value, index) => )}
// {/*{console.log(state)}*/}
// ;
// }
//
// const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)