import React, { useState, useRef, useEffect } from 'react'
import { connect } from 'react-redux'

import ProgressBar from 'react-bootstrap/ProgressBar'
import WithSpinner from '../../../../utility/hoc/spinner/with-spinner.component'
import ToastComponent from '../../../../utility/toast/toast.component'
import {uploadProfilePhoto, clearAuthenticationState} from '../../../../../redux/user/user.action'

import {getCurrentUser, getUserIsSubmitting, getErrorMessage} from '../../../../../redux/user/selectors'

import "./profile-picture-edit.styles.scss"

const ProfilePictureEditComponent = ({ errorMessage, isSubmitting,
     doUploadProfileImage, doClearProfileImageUploadState
}) => {

    const ref = useRef(null);
    const [photo, setPhoto] = useState(null)
    const [photoUrl, setPhotoUrl] = useState(null)
    const SubmitButtonWithSpinner = WithSpinner(
        ({action}) =>
          (
            <div className="row justify-content-end mt-1">
                <div className="col-3">
                    <button type="button" name="submit" className="p-2 next btn btn-primary" onClick={action}>
                        Submit                                   
                    </button>
                </div>
                
            </div>
          )
        
        )

    useEffect(() =>{
        return () => {
            URL.revokeObjectURL(photoUrl)
            doClearProfileImageUploadState()
            console.log('finished uploading')
        }
    },[])

    const dismissToast = e => {
        doClearProfileImageUploadState()
    }

    const fileSelectHandler = evt => {
        setPhoto(evt.target.files[0])
        const theUrl = URL.createObjectURL(evt.target.files[0])
        if(!!ref.current.src){
            URL.revokeObjectURL(photoUrl)
        }
        ref.current.src = theUrl
        setPhotoUrl(theUrl)
    }

    return (  
        <>
            
            <div className="col-md-10 center">
                <div className="profilepic">
                    {
                        // !!photo ?
                        <img ref={ref} alt="" className="img-circle img-responsive" />
                        // :
                        // <FontAwesomeIcon
                        //     icon={"user-circle"} size="8x"/>
                    }
                </div>
                <ProgressBar striped variant="success" now={0} />

                <div className="pic-browse p-1">
                    <div className="dropzone">
                        <input name="file" type="file" onChange={fileSelectHandler}/>
                    </div>
                </div>
            </div>
            <div className="p-2">
                <SubmitButtonWithSpinner defaultHeight={false} isLoading={isSubmitting} 
                    action={() => doUploadProfileImage(photo)}/>
            </div>
            { !!errorMessage ? <ToastComponent message={errorMessage} onclose={dismissToast}/> : null }
        
        </>
    )
}
 
const mapStateToProps = (state) => ({
    currentUser: getCurrentUser(state),
    isSubmitting: getUserIsSubmitting(state),
    errorMessage: getErrorMessage(state)
})

const mapDispatchToProps = dispatch => ({
    doUploadProfileImage: (photoRef) => dispatch(uploadProfilePhoto(photoRef)),    
    doClearProfileImageUploadState: () => dispatch(clearAuthenticationState())
  })

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePictureEditComponent)