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