import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Container, Row, Col} from 'reactstrap';
import ProfileEditContainer from './ProfileEditContainer.jsx';
import CompanyEditContainer from './CompanyEditContainer.jsx';
import ProfileShowContainer from './ProfileShowContainer.jsx';
import ProfileAddressesContainer from './ProfileAddressesContainer.jsx';
import BillingAddressesContainer from './BillingAddressesContainer.jsx';
import ChangePasswordContainer from './ChangePasswordContainer.jsx';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import {fetchProfileInfo, fetchCountries} from '../../actions/profileSettings/profileSettingsActions';
import './style/ProfieSettingsContainer.css';

class ProfileSettingsContainer extends Component {
    componentDidMount(){
        this.props.dispatch(fetchProfileInfo(this.props.userInfo.wiaas_id_user));
        this.props.dispatch(fetchCountries());
    }

    render() {
        const  {profileInfo, isLoading} = this.props;
        return (
            <Container fluid={true} id="proffile-settings">
                {
                    isLoading &&
                    <div className="loader">
                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                    </div>
                }
                {
                    (profileInfo && !isLoading) &&
                    <Row>
                        <Col xl="8" lg="8" md="6" xs="12">
                            <WiaasBox>
                                <ProfileEditContainer idUser={this.props.userInfo.wiaas_id_user} profileInfo={this.props.profileInfo}/>
                                {
                                    profileInfo.isCompanyAdmin === 1 &&
                                    <CompanyEditContainer idUser={this.props.userInfo.wiaas_id_user} profileInfo={profileInfo}/>
                                }
                                <ProfileAddressesContainer idUser={this.props.userInfo.wiaas_id_user}/>
                                <BillingAddressesContainer idCompany={profileInfo.idCompany} idUser={this.props.userInfo.wiaas_id_user}/>
                            </WiaasBox>
                        </Col>
                        <Col xl="4" lg="4" md="6" xs="12">
                            <ProfileShowContainer profileInfo={this.props.profileInfo}/>
                            <ChangePasswordContainer profileInfo={this.props.profileInfo}/>
                        </Col>
                    </Row>
                }
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    profileInfo: state.profileSettingsReducer.profileInfo,
    isLoading: state.profileSettingsReducer.isLoading,
    userInfo: state.auth.userInfo
});
export default connect(mapStateToProps)(ProfileSettingsContainer);