import React,{Component}  from 'react'
import   PropTypes from 'prop-types'
import { compose } from 'recompose'
import {connect} from 'react-redux'
import {
  withRouter,
} from 'react-router-dom';

import {
  Divider,  Message,Container,Header
} from 'semantic-ui-react';
import {session,getUserFromJwtTocken} from '../services';
import PublicLayout from "./frames/PublicLayout";
import NearBottom from "./navs/NearBottom";
import Next2Footer from "./navs/Next2Footer";
import './css/nav.css'
import SigninForm from './forms/SigninForm'
/* eslint-disable no-console */


class SigninPageUI extends Component{

  onSubmit= (user) => {
    const {history:{push},onLogin,retrieveAuthUserFromJWT} = this.props;

    return onLogin(user).then(res=>res.value.accessToken)
    .then(t=>retrieveAuthUserFromJWT(t))
    .then(u=>u.value.id)
    .then(id=>push(`/users/${id}`))
    .catch(() => {

      console.log("PPPPPP: ",this.props.errors);
    });
  }

  render(){
    const {history,loading,errors,isVerified,verifiedUser} = this.props

   const errs =(errors)? errors.message.split(","):'';
    return(
      <PublicLayout
      className="register"
      url1="/" link1="Home"
      url2="/signup" link2="Sign up"
      url3="/htw" link3="How It Works"
      >
      <Divider section hidden/>
      {errors &&
        <Container text textAlign='justified'>

        <Message
            error
            header='There are some errors with your submission'
           list={errs.map(e=>e)}
        />
        </Container>
    }{
      isVerified?
      <Container text>
      <Divider section hidden />
      <Message>
      <Header as ='h1'> Greetings {verifiedUser.firstname} {verifiedUser.lastname}</Header>
      <Header>
      Your Account Has Been Verified
      </Header>
      </Message>
      <Divider section hidden/>
          <SigninForm
          user={verifiedUser}
         onSubmit={this.onSubmit}
         errors={errors}
        loading={loading}
        history={history}
          />
      </Container>
      :
      <Container text>
      <Divider section hidden />
          <SigninForm
          user={verifiedUser}
         onSubmit={this.onSubmit}
         errors={errors}
        loading={loading}
        history={history}
          />
    </Container>
    }

          <NearBottom/>
          <Next2Footer/>
          </PublicLayout>
        );
  }
}

SigninPageUI.propTypes={
  verifiedUser:PropTypes.shape({}),
  isVerified:PropTypes.bool,
  loading:PropTypes.bool,
  errors:PropTypes.shape({}),
  history:PropTypes.shape({
  push:PropTypes.func.isRequired
 }).isRequired,
 onLogin:PropTypes.func.isRequired,
 retrieveAuthUserFromJWT:PropTypes.func.isRequired,

}
SigninPageUI.defaultProps={
  isVerified:false,
 verifiedUser:null,
  errors:{},
  loading:false
}

/**
 * To use connect(), you need to define a special function called mapStateToProps
 * that tells how to transform the current Redux store state into the props you want
 * to pass to a presentational component you are wrapping.
 */
const mapStateToProps =(state) =>({
  authUser:state.sessionState.user,

  errors: state.sessionState.isError ,
  loading:state.sessionState.isLoading,
  user:state.userState.data||{
    email:'',password:'',id:null
  },
  isVerified:state.authManagementState.isFinished,
  verifiedUser:state.authManagementState.data||{
    email:'',password:'',id:null
  }
})

 /**
* In addition to reading the state, container components can dispatch actions.
* In a similar fashion, you can define a function called mapDispatchToProps() that receives the dispatch() method
*  and returns callback props that you want to inject into the presentational component.
*/

// SERVICES_MESSAGES_FIND



const mapDispatchToProps = (dispatch) => ({
  // Sign in with credentials
  onLogin: (user) =>dispatch(session.authenticate({ strategy: 'local', ...user})),
  retrieveAuthUserFromJWT : jwt=> dispatch({
    type: 'RETRIEVE_AUTH_USER_FROMJWT',
    // payload:authUser
    payload: getUserFromJwtTocken(jwt)

}),

});



    const SigninPage=compose(
      withRouter,
      connect(
        mapStateToProps,
        mapDispatchToProps
      ),
    )(SigninPageUI)
  export default SigninPage;