import {store} from "../../reducers";
import {actionFindMyTracks} from "../../actions";
import {CTrackDropZone} from "../tools/trackdropzone";
import {CTrack} from "../track";
import {connect} from "react-redux";
import {useEffect, useState} from "react";
import {arrayMoveImmutable} from "array-move";
import {SortableContainer, SortableElement} from "react-sortable-hoc";
import {CPreloaded} from "../preloader";


const Mytracks = ({tracks={}}) => {

    return(
        <div>
            {tracks.map(track => <CTrack track={track}/> )}
        </div>
    )
}
export const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(Mytracks)


export const NoPlaylistMytracks = () =>
    <div>
    <h1>Моя музыка</h1>
        <CTrackDropZone>
            <CPreloaded promiseName='findMyTracks1'>
            <CMyTracks />
            </CPreloaded>
        </CTrackDropZone>
    </div>



//
// const SortableItem = SortableElement(CTrack);
//
// const MyTracks = ({children}) =>
//         <div>
//             {children}
//         </div>
//
//
// const SortableList = SortableContainer(MyTracks)
// // export const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(MyTracks)
//
// export const NoPlaylistMytracks = () =>
//     <div>
//     <h1>Моя музыка</h1>
//         <CTrackDropZone>
//             <CPreloaded promiseName='findMyTracks1'>
//             <CSortableComponent />
//             </CPreloaded>
//         </CTrackDropZone>
//     </div>
//
//
// 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}/>)}
//     </SortableList>;
// }
//
// const CSortableComponent = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(SortableComponent)
//
// store.dispatch(actionFindMyTracks())