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";

const SortableItem = SortableElement(CTrack);

const MyTracks = ( {children}) =>
    <div className='Category'>
        {children}
    </div>
const SortableList = SortableContainer(MyTracks)
// const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)


export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
    <>
        <CPlaylistDropZone >
            <CSortableComponent />
     </CPlaylistDropZone >
    </>


function SortableComponent({tracks=[]}) {
    const [state, setState] = useState(tracks)
    useEffect(() => {
        setState (tracks)
    },[tracks])
    const onSortEnd = ({oldIndex, newIndex}) => {
        setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
    };

    return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
        {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
        {/*{console.log(state)}*/}
    </SortableList>;
}

const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)