import {useCallback} from "react";
import {store} from "../reducers";
import {useDropzone} from "react-dropzone";
import {connect} from "react-redux";
import {actionUploadTrack, actionFindMyTracks, backURL} from "../actions";
import {CPreloaded} from "./preloader";


const defaultTrack = {
    "_id": "61dc5a42e9472933a6785f18",
    "url": "track/fe15599bbb13c96d70dd5a1591a0b158",
    "originalFileName": "cart.png",
    "owner": {
        "login": "mfdok43"
    }
}

export const PageMain = () =>
    <div>
    <h1>Главная страница</h1>
        <CTrackDropZone />

    </div>

function TrackDropZone({ onLoad }) {
    const onDrop = useCallback((acceptedFiles) => {
        // Do something with the files
        onLoad(acceptedFiles[0]);
    }, []);
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

    return (
        <div {...getRootProps()}>
            <input {...getInputProps()} />
            {isDragActive ? (
                <p>Перетащите файл сюда ...</p>
            ) : (
                <p>Для добавления трэка перетащите файлы в плейлист</p>

            )}
           {/*<CPreloaded>*/}
               <CMyTracks />
           {/*</CPreloaded>*/}

        </div>
    );

}


const CTrackDropZone = connect (null, {onLoad: actionUploadTrack}) (TrackDropZone)


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

const MyTracks = ({tracks=defaultTrack}) => {
    return(
        <div>
            {console.log(tracks,'kak dela')}
        {tracks.map(track => <Track track={track}/> )}
        </div>
    )
}
const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(MyTracks)

store.dispatch(actionFindMyTracks())