import React, { useState, useEffect } from 'react'
import { useParams } from "react-router-dom"
import { connect } from 'react-redux'
import SimpleLineIcon from 'react-simple-line-icons'
import samplePic from './assets/images/profile-picture.png'
import PersonalInformationComponent from './personal-information.component'
import WorkInformationComponent from "./work-information.component"
import AddressInformationComponent from "./address-information.component"
import { getCurrentUser, getSaveResult, getProfileDataSaveResult, getErrorMessage, getGetIsEducator } from '../../../redux/user/selectors'
import {  fetchUserProfileAsync, clearFetchProfileState, clearAuthenticationState } from '../../../redux/user/user.action'
import ToastComponent from '../../utility/toast/toast.component'
import { decryptURIparams } from '../../utility/Utils'

//edit information
import  ProfilePictureEditComponent  from "./modal-views/profile-picture/profile-picture-edit.component"
import GenericModalComponent from '../../utility/hoc/modal-views/generic.modal.component'
import './user-profile.styles.scss'

const UserProfileComponent = ({
    currentUser, saveResult, profileSaveResult,errorMessage,isEducator,
    doFetchUserProfile, doClearProfile, doClearErrorState
}) => {
    const {loginUserName, userPublicIdMasked, profile} = currentUser
    const [tab, setTab] = useState(1)
    const [showProfilePicEdit, setShowProfilePicEdit ] = useState(false)

    const { userId } = useParams()
    
    useEffect(() => {
        const theTargetUserId = decryptURIparams(userId)        
        doFetchUserProfile(theTargetUserId)
        return () => {
            doClearProfile()
        }
    },[])

    useEffect(()=>{
        if(!!saveResult){
            setShowProfilePicEdit(false)
        }
        if(!!profileSaveResult && profileSaveResult === true){
            doFetchUserProfile()
        }
    },[saveResult, profileSaveResult])

    return (
        <div className="col-sm-12 center">
            <div className="panel panel-white profile">
                <div className="panel-body p-3">
                    <div id="main-wrapper" className="container">
                        <div className="profile-image-container">
                            {
                                // use the current user profile to fetch the image. As this screen might be navigatied
                                //due to profile visit from other place, with the target user's userid and not the current
                                //user. This will take into consideration the current logged in user's profile image as well.
                                !! currentUser.profile && !! currentUser.profile.profilePhotoUrl ? 
                                    <img src={currentUser.profile.profilePhotoUrl }/>
                                    :
                                    <img alt="none" />
                            }
                            <button type="button" className="btn profile-edit p-1" disabled={!!userId ? true: false } onClick={e => setShowProfilePicEdit(true)}>
                                <SimpleLineIcon name="pencil" size="Medium"/>
                            </button>                            
                        </div>
                        <div className="profile-detail">
                            {/* show the target user's name and public mask if available */}
                            <h3>{!!userId && currentUser.profile ? currentUser.profile.fullName: loginUserName}&nbsp;/&nbsp;{!!userId && currentUser.profile ? currentUser.profile.userPublicIdMasked: userPublicIdMasked}</h3>
                            <div className="tabbable-panel">
                                <div className="tabbable-line">
                                    < ul className="nav nav-tabs ">
                                        <li className={`${tab === 1 ? 'active' : ''} py-2 mr-3`}   onClick={ e => setTab(1)}>                                            
                                            <i className="icon-user"></i>
                                            <span  className="px-2" data-toggle="tab">
                                                     Personal Information
                                            </span>
                                        </li>
                                        <li className={`${tab === 2 ? 'active' : ''} py-2 mr-3`}   onClick={ e => setTab(2)}>                                            
                                            <i className="icon-location-pin"></i>
                                            <span  className="px-2" data-toggle="tab">
                                                     Address Information
                                            </span>
                                        </li>
                                        {
                                            isEducator ?
                                                <li className={`${tab === 3 ? 'active' : ''} py-2 mr-3`}  onClick={ e => setTab(3)}>                                            
                                                    <i className="icon-briefcase"></i> 
                                                    <span className="px-2" data-toggle="tab">Work Information
                                                        </span>
                                                </li>:
                                                null
                                        }
                                    </ul>
                                    <div className="tab-content">
                                        <div className={`${ tab === 1 ? 'active ': ''} tab-pane mt-2`} id="tab_default_1">
                                            <PersonalInformationComponent readOnly={!!userId ? true: false } userProfile={profile}/>
                                        </div>
                                        <div className={`${ tab === 2 ? 'active ': ''} tab-pane mt-2`} id="tab_default_2">
                                            <AddressInformationComponent readOnly={!!userId ? true: false } userProfile={profile}/>
                                        </div>
                                        {
                                            isEducator ?
                                                <div className={`${ tab === 3 ? 'active ': ''} tab-pane mt-2`} id="tab_default_2">
                                                    <WorkInformationComponent readOnly={!!userId ? true: false } userProfile={profile}/>
                                                </div>
                                                : null
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>    
                </div>
            </div>
            { !!errorMessage ? <ToastComponent message={errorMessage} onclose={doClearErrorState}/> : null }
            <GenericModalComponent
                show={showProfilePicEdit}
                onHide={() => setShowProfilePicEdit(false)}
                title={"Change Profile Picture"}
            >
                <ProfilePictureEditComponent />
            </GenericModalComponent>
            
        </div>        
    )
}

const mapStateToProps = (state) => ({
    currentUser: getCurrentUser(state),
    saveResult: getSaveResult(state),
    profileSaveResult: getProfileDataSaveResult(state),
    errorMessage: getErrorMessage(state),
    isEducator: getGetIsEducator(state)
})

const mapDispatchToProps = dispatch => ({
    doFetchUserProfile: (userId) => dispatch(fetchUserProfileAsync(userId)),
    doClearProfile: () => dispatch(clearFetchProfileState()),
    doClearErrorState: () => dispatch(clearAuthenticationState()),
  })

export default connect(mapStateToProps, mapDispatchToProps)(UserProfileComponent)