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

import AddressInformationEditComponent from "./modal-views/address-information-edit/address-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'

const AddressInformationComponent = ({
    userProfile, profileDataSaveResult,
    doClearState, readOnly = false
}) => {

    const [showAddressInfoEdit, setShowAddressInfoEdit ] = useState(false)

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

    return (  <>
    <div className="well">
        <div className="width70 text-left">
            <h3 className="no-m">Address Information</h3>
        </div>
        <div className="width30 text-right">
            <button type="button" className="btn p-1" disabled={readOnly}  onClick={e => setShowAddressInfoEdit(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>Street</h4>
                    <span>{userProfile.street ?? ""}</span>
                </li>
                
                <li className="left_address_info col-md-6">
                    <h4>City</h4>
                    <span>{userProfile.city ?? ""}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <h4>State</h4>
                    <span>{userProfile.state ?? ""}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Country</h4>
                    <span>{userProfile.country ?? ""}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Pin Code</h4>
                    <span>{userProfile.pinCode ?? ""}</span>
                </li>
                
                <div className="clearfix"></div>
            </ul>
        : 
        <Spinner defaultHeight={false} />
    }
    

    <GenericModalComponent
                show={showAddressInfoEdit}
                onHide={() => setShowAddressInfoEdit(false)}
                title={"Change Address Information"}
            >
                <AddressInformationEditComponent />
            </GenericModalComponent>

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

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