import React, { useRef, useEffect } from 'react'
import {connect} from 'react-redux'
import { Formik, Form } from 'formik'
import { Bar, Line } from 'react-chartjs-2'
import ToastComponent from '../../../../utility/toast/toast.component'
import WithSpinner from '../../../../utility/hoc/spinner/with-spinner.component'
import { ASelect, ADatePickerV3 } from '../../../../../components/form-fields/form-field.component'
import { fetchPatientListsAsync } from '../../../../../redux/dashboard/patient-list/patient-list.action'
import { fetchDashboardContentForDoctorOfPatientTrendAsync } from '../../../../../redux/dashboard/dashboard-detail/dashboard-detail.action'
import {data, options} from '../../chart-data/default-chart.data'
import {  
    getPatientsAsKeyValue
} from  '../../../../../redux/dashboard/patient-list/selectors'
import { MedicalLog_Enums, MettaSvr_Common } from '../../../../../redux/helpers/action-enums'
import { notAfterToday } from '../../../../utility/Utils'
import { initialValues } from './trending.chart.initial-values'
import { validators } from './trending.chart.validators'
import "../bar-chart-panel.styles.scss"

const BarChartPanelTrendComponent = ({title, chartData=data, chartOptions=options, patients,
    fetchPatientList, doFetchDashboardContentForPatientTrend
}) => {
    const canvasRef= useRef(null)

    useEffect(() => {
        fetchPatientList()
    }, [])

    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="panel panel-white">
            <div className="panel-heading">
                <h3 className="panel-title">{title}</h3>
            </div>
            <div className="panel-body">
                <div className="subscription-box text-center">
                    <Formik
                            initialValues={{
                                ...initialValues
                            }}
                            validationSchema={validators}
                            onSubmit={ values => {
                                doFetchDashboardContentForPatientTrend(values)
                            }}
                        >
                            {formik => (
                                <Form className="msform">

                                <fieldset className="mt-4">
                                    <div className="form-row">
                                        <div className="form-group col-md-5">
                                            <ASelect name="PatientId" label="Patient Id/Name" options={patients}/>                    
                                        </div>
                                        <div className="col-md-3 form-group">
                                            <ADatePickerV3 label="From Date" name="FromDate" 
                                                placeholder="Enter From Date"                                                                                 
                                                showPreviousMonths
                                                showYearDropdown
                                                dateFormat={MettaSvr_Common.DateFormatV1}
                                                saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                                filterDate={notAfterToday}
                                                />                                    
                                        </div>
                                        <div className="col-md-3 form-group">
                                            <ADatePickerV3 label="To Date" name="ToDate" 
                                                placeholder="Enter To Date"                                                                                
                                                showPreviousMonths
                                                showYearDropdown                                    
                                                dateFormat={MettaSvr_Common.DateFormatV1}
                                                saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                                filterDate={notAfterToday}
                                                
                                                />                                    
                                        </div>
                                        <div className="col-md-1 form-group">
                                            <SubmitButtonWithSpinner defaultHeight={false} isLoading={false}/>                                
                                        </div>
                                    </div>
                                </fieldset>                                
                    
                            </Form>                    
                            )
                            }
                        </Formik>
                    {/* { !!errorMessages ? <ToastComponent message={errorMessages} onclose={dismissToast}/> : null } */}
                    
                </div>
                <div>
                    <Bar data={chartData} options={chartOptions} />                    
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => ({
    patients: getPatientsAsKeyValue(state)
})

const mapDispatchToProps = dispatch => ({
    fetchPatientList: () => dispatch(fetchPatientListsAsync()),
    clearState: () => dispatch(),
    doFetchDashboardContentForPatientTrend: (params) => dispatch(fetchDashboardContentForDoctorOfPatientTrendAsync(params)),

})

export default connect(mapStateToProps, mapDispatchToProps)(BarChartPanelTrendComponent)
