import React, { useState } from 'react'
import { Formik, Form } from 'formik'
import { connect } from "react-redux"
import { Link } from "react-router-dom"
import ToastComponent from '../../utility/toast/toast.component'
import WithSpinner from '../../utility/hoc/spinner/with-spinner.component'
import { validators } from "./change-password.validation.rules"
import { initialValues } from "./change-password.initial-values";
import { ATextField } from "../../form-fields/form-field.component"
import { UserActionTypes } from "../../../redux/user/action.types"
import { changePasswordRequestAsync } from "../../../redux/user/user.action"

import "./change-password.styles.scss"

const ChangePasswordComponent = ({theUserId, isFetching, errorMessage, clearState, sendChangePassword, changePasswordRequestFinished}) => {


  const [passwordShown, setPasswordShown] = useState(false)

  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  }
    const dismissToast = theForm => {
        if(changePasswordRequestFinished){
            theForm.resetForm()
        }
        clearState()
    }

    const SubmitButtonWithSpinner = WithSpinner(
        () =>
          (<div className="text-center pt-4">                      
            <button type="submit" className="btn btn-primary btn-block mt-2">Submit</button>
          </div>)
        
        )

    return (  
        <div className="col-md-6 mt-5 center">
            <div className="panel panel-white">
                <div className="panel-body p-3">
                    <Formik
                        initialValues={{
                            ...initialValues(theUserId)
                        }}
                        validationSchema={validators}
                        onSubmit={ values => {
                            console.log(values)
                            sendChangePassword(values)                    
                        }}
                    >
                        {formik => (
                            <Form className="msform m-t-md">
                                                        
                                <div className="login-box">
                                    <Link to="" className="logo-name text-lg text-center">Metta</Link>
                                    <div className="mt-4">
                                        <div className="form-group">
                                            <ATextField type={`${passwordShown  ? 'text' : 'password'}`} 
                                                fonticon={`${passwordShown  ? 'eye-slash' : 'eye'}`} 
                                                groupiconaction={togglePasswordVisiblity} 
                                                label="" placeholder="Old Password" name="OldPassword" />                                                                                                                  
                                        </div>
                                        <div className="form-group">
                                            <ATextField type={`${passwordShown  ? 'text' : 'password'}`} 
                                                fonticon={`${passwordShown  ? 'eye-slash' : 'eye'}`} 
                                                groupiconaction={togglePasswordVisiblity} 
                                                label="" placeholder="New Password" name="NewPassword" />                                           
                                        </div>
                                        <div className="form-group">
                                            <ATextField type={`${passwordShown  ? 'text' : 'password'}`} 
                                                fonticon={`${passwordShown  ? 'eye-slash' : 'eye'}`} 
                                                groupiconaction={togglePasswordVisiblity} label="" 
                                                placeholder="Confirm Password" name="ConfirmPassword" />                                            
                                        </div>
                                    </div>
                                    <SubmitButtonWithSpinner defaultHeight={false} isLoading={isFetching}/>
                                    <p className="text-center m-t-xs text-sm">2021 &copy; Metta</p>
                                </div>
                                { !!errorMessage ? <ToastComponent message={errorMessage} onclose={e => dismissToast(formik)}/> : null }
                                { !!errorMessage == false && changePasswordRequestFinished ? 
                                    <ToastComponent success={true} message="Password changed successfully" onclose={e => dismissToast(formik)}/> : null }

                            </Form>
                        )}
                </Formik>
                
                </div>
            </div>
        </div>
    
    )
}
 
const mapStateToProps = ({user}) => (
  {
    theUserId: user.currentUser.email,
    changePasswordRequestFinished: user.changePasswordRequestCompletedSuccessfully,
    isFetching: user.isFetching,
    errorMessage: user.errorMessage,
  }
)

const mapDispatchToProps = dispatch => ({
  sendChangePassword: ({UserId, OldPassword, NewPassword}) => dispatch(changePasswordRequestAsync({UserId, 
    newPassword: NewPassword,
    password: OldPassword})),
  clearState: () => dispatch({
    type: UserActionTypes.POST_USER_CLEAR_STATE        
  })
})

export default connect(mapStateToProps, mapDispatchToProps)( ChangePasswordComponent)