import React, {useState} from 'react'
import { Formik, Form } from 'formik'
import { connect } from 'react-redux'
import { ASelect } from "../../../form-fields/form-field.component"
import { updatePatientCriticallityStatusAsync, clearPatientListErrorState} from "../../../../redux/dashboard/patient-list/patient-list.action"
import {  getIsSaving, getTargetPatient, getErrorMessage, getUpdateIndex} from '../../../../redux/dashboard/patient-list/selectors'

import ToastComponent from '../../../utility/toast/toast.component'
import WithSpinner from '../../../utility/hoc/spinner/with-spinner.component'
import  { formInitialValues, colorCodeOptions} from './update-criticality-status.initial-values'
import {validators} from './update-criticality-status.validation-rules'
import './update-criticality-status.styles.scss'

const UpdatePatientCriticalityStatusComponent = ({ errorMessage, loading,currentPatientId, wipIndex,
    doDismissError, doSaveCriticalityStatus}) => {
    const kFieldName = ''
    const [colorCode, setColorCode] = useState('')
    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 selectionChanged = e => {
        const selectedColorValue = parseInt(e.target.value)
        const option = colorCodeOptions.filter(colorCodeOption => colorCodeOption.value === selectedColorValue)
        if(!!option && option.length === 1){
            setColorCode(option[0].additionClass)
        }else{
            setColorCode('')
        }
    }

    const dismissToast = e => {
        doDismissError()
    }

    return (  <>
     <Formik
                initialValues={
                    formInitialValues
                }

                validationSchema={validators}
                onSubmit={ values => {
                    
                    const body = { "CriticalityStatus": parseInt(values['CriticalityStatus']), UserId: currentPatientId, indexOfRecord: wipIndex}
                    doSaveCriticalityStatus(body)                    
                }}
            >
                {formik => (
                    <Form>
                        <fieldset >

                            
                            <div className="form-row">
                                <div className="col-md-12">
                                   
                                    <ASelect name="CriticalityStatus" label="Criticallity Status" options={colorCodeOptions} 
                                        groupelement={<span className={`${colorCode} ml-2`}>&nbsp;</span>}
                                        doChanged={selectionChanged}
                                        /> 
                                    
                   
                                </div>
                            </div>
                                                        

                        </fieldset>
                        

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

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

    </>)
}

const mapStateToProps = (state) => ({
    loading: getIsSaving(state),
    errorMessage: getErrorMessage(state),
    currentPatientId: getTargetPatient(state),
    wipIndex: getUpdateIndex(state)
})

const mapDispatchToProps = dispatch => ({
    doSaveCriticalityStatus: (body) => dispatch(updatePatientCriticallityStatusAsync(body)),
    doDismissError: () => dispatch(clearPatientListErrorState())
})

export default connect(mapStateToProps, mapDispatchToProps)(UpdatePatientCriticalityStatusComponent)