import React from 'react'
import { connect } from "react-redux";
import { Redirect, useLocation, useRouteMatch } from 'react-router-dom'
import ToastComponent from "../utility/toast/toast.component"
import { Formik, Form } from 'formik'
import { UserActionTypes } from "../../redux/user/action.types"
import { forgotPasswordRequestAsync } from "../../redux/user/user.action"
import WithSpinner from '../utility/hoc/spinner/with-spinner.component'
import illustration from './images/forgot-password.png'
import { ATextField } from '../form-fields/form-field.component'
import { validate } from './forgot-password.validation.rules'
import './forgot-password.styles.scss'

const ForgotPassword = ({errorMessage, ...props}) => {


  const dismissToast = e => {
    props.clearState()
  }

  let { path, url } = useRouteMatch()
  if (props.forgotPasswordRequestFinished) {
      setTimeout(() => {
        props.clearState()  
      }, 10)
      return <Redirect to={'/'} />
  }

  const ButtonWithSpinner = WithSpinner(
    () =>
      (<div className="text-center pt-4">                      
        <button type="submit" className="btn-login">Submit</button>
      </div>)
    
    )

  return (
    <section className="signin-content">
      <div className="container">
        <div className="row">
          <div className="col-md-7 img-responsive">
            <img src={illustration} className="img-fluid mt-2" />
          </div>
          <div className="col-md-5">
            <div className="form-box ml-3">
              <h2 className="fieldset-title mt-0">Forgot Password</h2>

              <Formik
                initialValues={{
                  email: ''
                }}
                validationSchema={validate}
                onSubmit={values => {
                    const {email} = values
                    console.log(email)
                    props.sendForgotPassword(email)
                }}
              >
                {formik => (
                  <div>
                    <Form>
                      <ATextField label="Email" name="email" type="email" />                      
                        <ButtonWithSpinner defaultHeight={false} isLoading={props.isFetching}/>
                    </Form>
                  </div>
                )}
              </Formik>
              <small className="text-muted form-text mt-2 text-center">Enter e-mail address to get password reset link</small>
              { !!errorMessage ? <ToastComponent message={errorMessage} onclose={dismissToast}/> : null }

            </div>
          </div>
        </div>
      </div>
    </section>

  )
}

const mapStateToProps = ({user}) => (
  {
    forgotPasswordRequestFinished: user.forgotPasswordRequestCompletedSuccessfully,
    isFetching: user.isFetching,
    errorMessage: user.errorMessage,
  }
)

const mapDispatchToProps = dispatch => ({
  sendForgotPassword: (email) => dispatch(forgotPasswordRequestAsync({UserId: email})),
  clearState: () => dispatch({
    type: UserActionTypes.POST_USER_CLEAR_STATE        
  })
})
export default connect(mapStateToProps, mapDispatchToProps)(ForgotPassword)