import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {compose} from 'recompose'
import {connect} from 'react-redux'
import {
  Divider,  Message,Container
} from 'semantic-ui-react';
import { withRouter,} from 'react-router-dom'
import withAuthorization from './hocs/withAuthorization'
import SetUpProfile from './dashboardComponents/SetUpProfile'
import DashboardLayout from './frames/DashboardLayout'
import DashboardTopMenu from './navs/DashboardTopMenu'
import ManageRoleAndPasswordForm from './forms/ManageRoleAndPasswordForm'
import {services} from '../services';




class UserPageUI  extends Component {

  onSubmit= (user) => {
    const {onPatch, history:{push},authUser } = this.props;
   // const {onPatch, authUser} = this.props;
   console.log ('babababababa: ',user)
    return onPatch(authUser.id,user).then(
      ()=>push(`/${user.role}s/${authUser.id}`)
    )

  }

  render(){

    const {authUser,loading,errors,history} = this.props
   const errs =(errors)? errors.message.split(","):'';
    return (
      <DashboardLayout
      topMenu={<DashboardTopMenu stProfileIsSet={false} homeURL='/student'/>}
      profileIsSet={false}
      mainContent=
      {// !profileIsSet ?
        <SetUpProfile intro={`Welcome ${authUser.firstname}`}  subintro="All of us @ Takesavillage are excited to have you:"  uploadAction='Add'
        instruction="Please tell us more about your intensions:"
        >
        <Divider section hidden/>
        {
        errors &&
          <Container text textAlign='justified'>

          <Message
              error
              header='There are some errors with your submission'
             list={errs.map(e=>e)}
          />
          </Container>
      }
      <Divider hidden />
    <Divider hidden />
          <ManageRoleAndPasswordForm
          onSubmit={this.onSubmit}
          user={authUser}
          errors={errors}
          loading={loading}
          history={history}
          />
        </SetUpProfile>
       // :
       // <StudentHomeContent />
      }
     // sideContent={sideContent}
      />
    );
  }
}

UserPageUI.propTypes={
  //  users:PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  authUser:PropTypes.shape({}).isRequired,
  loading:PropTypes.bool,
  errors:PropTypes.shape({}),
  history:PropTypes.shape({
  push:PropTypes.func.isRequired
 }).isRequired,
 onPatch:PropTypes.func.isRequired,
}
UserPageUI.defaultProps={
  errors:{},
  loading:false
}

const mapStateToProps=state=>({
    authUser: state.authUserState.authUser,
    errors: state.userState.isError ,
    loading:state.userState.isLoading
})

const mapDispatchToProps = (dispatch) => ({
  onPatch:(id,user)=>dispatch(services.users.patch(id,user))
});
 const authCondition = (authUser) =>  !!(authUser);

const UserPage=compose( withAuthorization(authCondition,mapDispatchToProps),connect(mapStateToProps))(UserPageUI)


export default  UserPage