import React, {useEffect } from 'react'
import { connect } from 'react-redux'
import InfoPanelComponent from "./child-views/info-panel.component"
import BarChartPanelComponent from "./child-views/bar-chart-panel.component"
import BarChartPanelTrendComponent from "./child-views/trending/bar-chart-panel.trend.component"
import { fetchDashboardContentForDoctorAsync, fetchDashboardContentForEducatorAsync, clearDashboardContentErrorState, clearGetDashboardContentState } from "../../../redux/dashboard/dashboard-detail/dashboard-detail.action"
import {  
    getGetIsDoctor, getGetIsEducator, getGetIsPatient, getGetIsVisitor
} from '../../../redux/user/selectors'
import { getErrorMessages, getResultDiseaseWisePatientCount, getResultEducatorPatientCount , getIsFetchInProgress, getResultDashboardMetrics, getResultPatientCriticalityTrends } from "../../../redux/dashboard/dashboard-detail/selector"
import bodyImg from './assets/healthy_eating_plate.jpg'

import ToastComponent from '../../utility/toast/toast.component'
import  * as diseaseWisePatientTransformer  from './chart-data/disease-type-wise-patient.data'
import * as educatorWisePatientTransformer  from './chart-data/educator-wise-patient.data'
import * as patientCriticalityTrendTransformer  from './chart-data/criticality-trend.patient.data'

const GraphListComponent = ({ isDoctor,  isPatient, isVisitor, diseasePatientCount, educatorPatientCount, 
    patientCriticalityTrend, isFetching, errorMessage,
    doFetchDashboardContentForDoctor, doFetchDashboardContentForEducator, doClearAll, doClearErrorState, dashboardMetrics
}) => {
    
    useEffect(() => {
        isDoctor ? doFetchDashboardContentForDoctor() : doFetchDashboardContentForEducator()
        
        return () => {
            doClearAll()
        }
    },[])

    const dismissToast = () => {
        doClearErrorState()
    }

    const {VisitorCount, PatientCount, EducatorCount} = dashboardMetrics ?? {}
    return isPatient || isVisitor ? 
        <div className="d-flex justify-content-center">              
            <img src={bodyImg} className="img-fluid mt-0" alt="none"/>
        </div> :    
        (
        <div id="main-wrapper" className="container pt-2">
            <div className="row">
                {
                    isDoctor ? 
                    <React.Fragment>
                        <div className="col-lg-4 col-md-6">
                            <InfoPanelComponent count={EducatorCount} title={"Total Educators"} iconName={"user-friends"} colorName={"green"}/>                            
                        </div>
                    </React.Fragment> : null
                }
                

                <div className={`${isDoctor ? 'col-lg-4 ' : ''} col-md-6 col-xs-6`}>
                    <InfoPanelComponent count={PatientCount} title={"Total Patients"} iconName={"wheelchair"} colorName={"violet"}/>

                </div>
                <div className={`${isDoctor ? 'col-lg-4 ' : ''} col-md-6 col-xs-6`}>                            
                    <InfoPanelComponent count={VisitorCount} title={"Total Visitors"} iconName={"users"} colorName={"orange"}/>
                </div>
            </div>
            <div className="row">
                <div className="col-md-6">
                    <BarChartPanelComponent chartData={diseaseWisePatientTransformer.transformToChartData(diseasePatientCount)} chartOptions={diseaseWisePatientTransformer.options} title={"Disease Type vs Patient count"}/>
                </div>
                {
                    isDoctor ? 
                        <div className="col-md-6">
                            <BarChartPanelComponent chartData={educatorWisePatientTransformer.transformToChartData( educatorPatientCount)} chartOptions={educatorWisePatientTransformer.options} title={"Educator vs Active Patient"}/>
                        </div> : null
                }
                {
                    isDoctor ? 
                        <div className="col-md-12">
                            <BarChartPanelTrendComponent chartData={patientCriticalityTrendTransformer.transformToChartData( patientCriticalityTrend)} chartOptions={patientCriticalityTrendTransformer.options} title={"Condition Trend"}/>
                        </div> : null
                }
            </div>
            
            { !!errorMessage ? <ToastComponent message={errorMessage} onclose={dismissToast}/> : null }
        </div>        

    )
 
}
 
const mapStateToProps = (state) => ({
    isDoctor: getGetIsDoctor(state),
    isEducator: getGetIsEducator(state),
    isPatient: getGetIsPatient(state),
    isFetching: getIsFetchInProgress(state),
    diseasePatientCount: getResultDiseaseWisePatientCount(state),
    educatorPatientCount: getResultEducatorPatientCount(state),
    patientCriticalityTrend: getResultPatientCriticalityTrends(state),
    dashboardMetrics: getResultDashboardMetrics(state),
    errorMessage: getErrorMessages(state),
    isVisitor: getGetIsVisitor(state)

})

const mapDispatchToProps = dispatch => ({
    doFetchDashboardContentForDoctor: () => dispatch(fetchDashboardContentForDoctorAsync()),
    doFetchDashboardContentForEducator: () => dispatch(fetchDashboardContentForEducatorAsync()),
    doClearAll: () => dispatch(clearGetDashboardContentState()),
    doClearErrorState: () => dispatch(clearDashboardContentErrorState()),

})

export default connect(mapStateToProps, mapDispatchToProps)(GraphListComponent)