import React from 'react'
import { Formik, Form } from 'formik'
import WithSpinner from '../spinner/with-spinner.component'
import './with-form.styles.scss'
const WithForm = WrappedComponent =>  (props) => {
//card specific actions
    const { initialValues, validationRules, submitTheForm, readOnly, 
        transformData, theUser, identifier, rootKey, isFetching, ...restOfProps } = props
//generic actions + ui state info        
    const { previous, next, currentPage, totalPages } = restOfProps
    const SubmitButtonWithSpinner = WithSpinner(() =>
    (
        <button type="submit" name="submit" 
            className="p-2 next btn-register ml-3 mt-3">
            {currentPage !== totalPages ? 'Save & Next' : 'Submit' } 
        </button>
    )
)
    return (
        

        <Formik
            initialValues={
                { ...initialValues }
            }
            /* 
            validate= {(values) => {
                validationRules.validate(values)
                    .then(() => {})
                    .catch((err) => {
                    console.log('error is ',err)
                    throw err
                    })vw-100
                }}
               */ 
            validationSchema={validationRules}
            onSubmit={ values => {                    
                const body = transformData(values, theUser.userId)
                console.log(body)
                submitTheForm(body, values)
                // doNext()
            }}

            >
                {formik => {
                        // console.log("the form ",formik.values[rootKey])
                        return (
                        <Form className="msform" id={identifier}>      
                                {
                                    !!initialValues[rootKey] ?
// the form values sent to each child component, so they can use or update dynamically
                                    <WrappedComponent theForm={formik.values[rootKey]} readOnly={readOnly}/> : 
                                    <div className="atleast-width">

                                        <h3 className="fs-title">No data present</h3>                                   
                                    </div>
                                        
                                }
                                
                                {/* child element */}
                                <div className="d-flex p-3 justify-content-end">
                                {
                                    readOnly ? 
                                    <>
                                        <button type="button" name="prev" onClick={previous}
                                            hidden={currentPage === 1} className="p-2 next btn-register ml-3 mt-3">
                                            Prev                             
                                        </button>                                                        
                                        <button type="button" name="next" onClick={next}
                                            hidden={currentPage === totalPages} className="p-2 next btn-register ml-3 mt-3">
                                            Next                             
                                        </button> 
                                    </>: 
                                    (  
                                        <SubmitButtonWithSpinner isLoading={isFetching} defaultHeight={false}/>                                  
                                    )
                                }        
                                
                                                                                    
                            </div>
                        </Form>)
                    }
                }
        </Formik>
    )
}

export default WithForm