import React, {useEffect} from 'react'
import { Formik, Form } from 'formik'
import { connect } from 'react-redux'
import { ATextField, ASelect } from "../../../form-fields/form-field.component"
import { createVisitorStart, clearVisitorListState, updateVisitorStart} from "../../../../redux/visitor/visitor.action"
import { getCurrentUserId, getIsFetching, getErrorMessage, getCurrentVisitor} from '../../../../redux/visitor/selectors'
import ToastComponent from '../../../utility/toast/toast.component'
import WithSpinner from '../../../utility/hoc/spinner/with-spinner.component'
import  { formInitialValues, salutationOptions} from './add-visitor.initial-values'
import {validators} from './add-visitor.validation-rules'
import './add-visitor.styles.scss'

const AddVisitorComponent = ({ forPatient, errorMessage, loading, targetVisitor, 
     doDismissError, saveVisitor, updateVisitor}) => {

    useEffect(()=>{
        return () =>{
            doDismissError()
        }
    },[])
    
    const SubmitButtonWithSpinner = WithSpinner(
        () =>
          (
            <div className="row justify-content-end mt-1">
                <div className="col-3">
                    <button type="submit" name="submit" className="p-2 next btn btn-primary">
                        Submit                                   
                    </button>
                </div>
                
            </div>
          )
        
        )

    const dismissToast = e => {
        doDismissError(!!targetVisitor ? targetVisitor.VisitorId : null)
    }

    return (  <>
     <Formik
                initialValues={
                    !!targetVisitor ?
                    targetVisitor                    
                    :
                    formInitialValues(forPatient)
                    
                }

                validationSchema={validators}
                onSubmit={ values => {
                    console.log(values)
                    if (!!targetVisitor){
                        const {VisitorId, Salutation, FirstName, LastName, Email, PhoneNo} = values   
                        updateVisitor({VisitorId, Salutation, FirstName, LastName, Email, PhoneNo}) 
                    }  
                    else {
                        saveVisitor(values)                    
                    }
                }}
            >
                {formik => (
                    <Form>
                        <fieldset >
                            <div className="form-row">
                                <div className="form-group col-md-3">
                                    <ASelect name="Salutation" label="Signature" options={salutationOptions}/>                    
                                </div>
                            </div>
                          
                            <div className="form-row">
                                <div className="col-md-12">                                    
                                    <ATextField label="First Name" name="FirstName" type="text" />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">                                    
                                    <ATextField label="Last Name" name="LastName" type="text" />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextField label="Phone Number" name="PhoneNo" type="text" />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextField label="Email" name="Email" type="text" />
                                    
                                </div>
                            </div>
                
                            

                        </fieldset>
                        

                        <SubmitButtonWithSpinner defaultHeight={false} isLoading={loading}/>

                    </Form>
                )}
        </Formik>
        { !!errorMessage ? <ToastComponent message={errorMessage} onclose={dismissToast}/> : null }

    </>)
}

const mapStateToProps = (state) => ({
   
    loading: getIsFetching(state),
    errorMessage: getErrorMessage(state),
    targetVisitor: getCurrentVisitor(state)
})

const mapDispatchToProps = dispatch => ({
    updateVisitor: (body) => dispatch(updateVisitorStart(body)),
    saveVisitor: (body) => dispatch(createVisitorStart(body)),
    doDismissError: (identifier) => dispatch(clearVisitorListState(identifier))
})

export default connect(mapStateToProps, mapDispatchToProps)(AddVisitorComponent)