import React, {useState} from 'react'
import { Formik, Form } from 'formik'
import { connect } from 'react-redux'
import { ATextArea, ATextField, ASelect,ADatePickerV3 } from "../../../form-fields/form-field.component"
import { createLabReportStart, clearLabReportListErrorState} from "../../../../redux/dashboard/lab-report/lab-report.action"
import {  getIsSaving, getErrorMessage} from '../../../../redux/dashboard/lab-report/selectors'
import { MettaSvr_Common } from '../../../../redux/helpers/action-enums'
import {notAfterToday } from '../../../utility/Utils'
import ToastComponent from '../../../utility/toast/toast.component'
import WithSpinner from '../../../utility/hoc/spinner/with-spinner.component'
import  { formInitialValues, colorCodeOptions} from './add-lab-report.initial-values'
import {validators} from './add-lab-report.validation-rules'
import './add-lab-report.styles.scss'

const AddLabReportComponent = ({ errorMessage, doDismissError, saveLabReport, loading, forPatient}) => {

    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(forPatient)
                }

                validationSchema={validators}
                onSubmit={ values => {
                    console.log(values)
                    saveLabReport(values)                    
                }}
            >
                {formik => (
                    <Form>
                        <fieldset >

                        <div className="form-row">
                                <div className="col-md-12">
                    
                                    <ADatePickerV3 label="Date of Test" name="TestDate"   placeholder={MettaSvr_Common.DateFormat} 
                                        dateFormat={MettaSvr_Common.DateFormatV1}
                                        saveDateFormat={MettaSvr_Common.DateFormat}
                                        showPreviousMonths
                                        filterDate={notAfterToday}
                                        />
                                </div>
                            </div>
                            
                
                            
                            <div className="form-row">
                                <div className="col-md-12">                                    
                                    <ATextField label="Name of Test" name="TestName" type="text" />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextField label="Value" name="Value" type="text" />
                                </div>
                            </div>
                            
                            <div className="form-row">
                                <div className="col-md-12">
                                    {/* <ATextField label="Color Code" name="LabTestStatusIndicator" type={ 'text'} 
                                    fonticon={'eye-dropper'} className="read-only" readOnly={true} groupiconaction={togglePopoverVisiblity}
                                    />
                                     */}
                                    <ASelect name="LabTestStatusIndicator" label="Criticallity Status" options={colorCodeOptions} 
                                        groupelement={<span className={`${colorCode} ml-2`}>&nbsp;</span>}
                                        doChanged={selectionChanged}
                                        /> 
                                    
                   
                                </div>
                            </div>
                            
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextArea label="Comments" name="Comments" rows="2" />
                                </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),
})

const mapDispatchToProps = dispatch => ({
    saveLabReport: (body) => dispatch(createLabReportStart(body)),
    doDismissError: () => dispatch(clearLabReportListErrorState())
})

export default connect(mapStateToProps, mapDispatchToProps)(AddLabReportComponent)