import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAccountInfo, fetchExpireLoa } from '../actions/update_profile';
import UpdateProfileSidebar from '../components/UpdateProfileSidebar';
import UpdateProfileRoute from '../components/UpdateProfileRoute';
import UpdateProfileNotificationCenter from '../components/UpdateProfileNotificationCenter';
import ComponentWithNotification from '../components/ComponentWithNotification';

class UpdateProfile extends Component {
  
  componentDidMount() {
    this.props.fetchAccountInfo();
    this.props.fetchExpireLoa();
  }

  render() {
    if (this.props.accountInfo.isLoad) {
      return (
        <ComponentWithNotification>
          <div className="ibox-content sk-loading">
            <div className="text-center">
              <div className="sk-spinner sk-spinner-double-bounce">
                <div className="sk-double-bounce1" />
                <div className="sk-double-bounce2" />
              </div>
            </div>
          </div>
        </ComponentWithNotification>
      );
    }
    return (
      <ComponentWithNotification>
        <UpdateProfileNotificationCenter />
        <UpdateProfileSidebar />
        <UpdateProfileRoute />
      </ComponentWithNotification>
    );
  }
}

UpdateProfile.propTypes = {
  accountInfo: PropTypes.object.isRequired,
  fetchAccountInfo: PropTypes.func.isRequired,
  fetchExpireLoa: PropTypes.func.isRequired,
};

function mapStateToProps({ accountInfo }) {
  return { accountInfo };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchAccountInfo, fetchExpireLoa }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(UpdateProfile);