import React, {useState, useEffect} from 'react'
import { connect } from 'react-redux'
import PersonalInformationEditComponent from "./modal-views/personal-information-edit/personal-information-edit.component"
import GenericModalComponent from '../../utility/hoc/modal-views/generic.modal.component'
import Spinner from "../../utility/hoc/spinner/spinner.component"
import { getProfileDataSaveResult } from '../../../redux/user/selectors'
import { clearAuthenticationState } from '../../../redux/user/user.action'

import { UtilGenderToString, UtilDateFormatter } from '../../../redux/helpers/enum-string-array-utility'
const PersonalInformationComponent = ({
    userProfile, profileDataSaveResult,
    doClearState, readOnly = false
}) => {

    const [showPersonalInfoEdit, setShowPersonalInfoEdit ] = useState(false)

    useEffect(() => {
        if(!!profileDataSaveResult && true === profileDataSaveResult){
            setShowPersonalInfoEdit(false)
            doClearState()
        }
    }, [profileDataSaveResult])

    return (  <>
    <div className="well">
        <div className="width70 text-left">
            <h3 className="no-m">Personal Information</h3>
        </div>
        <div className="width30 text-right">
            <button type="button" className="btn p-1" disabled={readOnly}  onClick={e => setShowPersonalInfoEdit(true)}>
                <i className="icon-pencil"></i>                                                    
            </button>                            
            
        </div>
        <div className="clearfix"></div>
    </div>
    { !!userProfile ? 

        <ul className="list-unstyled user_data text-left row">
            <li className="left_address_info col-md-6">
                <h4>Name</h4>
                <span>{userProfile.fullName}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Doctor's Name</h4>
                <span>{userProfile.doctorName ?? ""}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Educator's Name</h4>
                <span>{userProfile.educatorName ?? ""}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Phone no</h4>
                <span>{userProfile.phoneNo ?? ""}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Email</h4>
                <span>{ userProfile.email ?? ""}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Gender</h4>
                <span>{ userProfile.genderVal}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Date of birth</h4>
                <span>{userProfile.dob}</span>
            </li>
            <li className="left_address_info col-md-6">
                <h4>Visitors</h4>
                <span>{
                !!userProfile.visitors ? 
                    userProfile.visitors.map( (visitor, index) => 
                        <p key={`vis-${index}`}>{`${index + 1})`}&nbsp;{visitor}</p>
                    )
                    : null}
                </span>
            </li>
            <div className="clearfix"></div>
        </ul> : <Spinner defaultHeight={false} />
    }
    
    <GenericModalComponent
                show={showPersonalInfoEdit}
                onHide={() => setShowPersonalInfoEdit(false)}
                title={"Change Personal Information"}
            >
                <PersonalInformationEditComponent />
            </GenericModalComponent>

    </>)
}

const mapStateToProps = (state) => ({    
    profileDataSaveResult: getProfileDataSaveResult(state),    
})

const mapDispatchToProps = dispatch => ({
    doClearState: () => dispatch(clearAuthenticationState())
  })
export default connect(mapStateToProps, mapDispatchToProps )(PersonalInformationComponent)