import {useCallback} from "react";
import {store} from "../../reducers";
import {actionSetAvatar, actionUploadImage, backURL} from "../../actions";
import {useDropzone} from "react-dropzone";
import {connect} from "react-redux";

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

    return (
        <div {...getRootProps()}>
            <input {...getInputProps()} />
            {isDragActive ? (
                <p>Перетащите файл сюда ...</p>
            ) : (
                <p>Сменить аву, нажмите или перетащите файл</p>
            )}
        </div>
    );
}


export const CAvatarDropZone = connect (null, {onLoad: actionUploadImage}) (AvatarDropzone)


const Avatar = ({ avatarURL = {} }) => {
    console.log(avatarURL);
    return (
        <div className='Avatar'>
            <img src={backURL + "/" + avatarURL.avatar?.url}></img>
        </div>
    )
};

export const CAvatar = connect((state) => ({avatarURL: state.promise.aboutMe?.payload}))(Avatar)