import React from "react";
import { MettaSvr_Common } from '../../../../redux/helpers/action-enums'
import {ATextField,  
    ADatePickerV3, ASelect} from '../../../form-fields/form-field.component'

const medicalHistoryPrefix = "med-history-"
const surgeryHistoryPrefix = "surgery-history-"
const medicationHistoryPrefix = "medication-history-"

const medicalHistoryRowComponent = (count, medicalHistoryOptions,medicalHistoryChanged, dateFilterFunc=()=>{return true}) => {
    return Array(count).fill(0).map((_, index) => {
            return (
                <div key={`${medicalHistoryPrefix}${index}`} id={`${medicalHistoryPrefix}${index}`}>
                    <ASelect name={`medicalLog.medicalHistory[${index}].diseaseType`} label="Disease" options={medicalHistoryOptions} doChanged={medicalHistoryChanged}/>
                    <div className="form-row">
                        <div className="form-group  col-md-6">                                    
                            <ADatePickerV3 label="From Date" 
                                name={`medicalLog.medicalHistory[${index}].fromDate`} 
                                placeholder={MettaSvr_Common.DateFormat} 
                                showPreviousMonths
                                showYearDropdown                                    
                                filterDate={dateFilterFunc}
                                dateFormat={MettaSvr_Common.DateFormatV1}
                                saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                />                              
                        </div>                                                                                             
                        <div className="form-group col-md-6">
                            <ADatePickerV3 label="To Date" 
                                name={`medicalLog.medicalHistory[${index}].toDate`} 
                                placeholder={MettaSvr_Common.DateFormat} 
                                showPreviousMonths
                                showYearDropdown 
                                dateFormat={MettaSvr_Common.DateFormatV1}
                                saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                filterDate={dateFilterFunc}
                            />                                    
                        </div>
                    </div> 
                </div>
                
            )
        }
    )
}

const surgeryComponent = (count, dateFilterFunc=()=> {return true}) => {
    return Array(count).fill(0).map((_, index) => (
        <div key={`${surgeryHistoryPrefix}${index+1}`} id={`${surgeryHistoryPrefix}${index+1}`}>
            <div className="form-row">
                <div className="col-md-6 form-group">
                    <ATextField label="Name" name={`medicalLog.surgeryDetails[${index}].surgeryName`} type="text" placeholder="Enter any surgeries"/>                            
                </div>
                <div className="col-md-6 form-group">
                    <ADatePickerV3 label="Date" 
                        name={`medicalLog.surgeryDetails[${index}].surgeryDate`} 
                        placeholder={MettaSvr_Common.DateFormat} 
                        showPreviousMonths
                        showYearDropdown                         
                        filterDate={dateFilterFunc}
                        dateFormat={MettaSvr_Common.DateFormatV1}
                        saveDateFormat={MettaSvr_Common.DateFormat}                                        
                    />                    
                </div>                        
            </div>
        </div>
    ))
}

const medicationComponent = (count, dateFilterFunc=()=> {return true}) => {
    return Array(count).fill(0).map((_, index) => (
        <div key={`${medicationHistoryPrefix}${index+1}`} id={`${medicationHistoryPrefix}${index+1}`}>
            <div className="form-row">
                <div className="col-md-4 form-group">
                    <ATextField label="Medicine Name" name={`medicalLog.medications[${index}].medicationName`} type="text" placeholder="Enter medicine name"/>                            
                </div>
                <div className="col-md-4 form-group">
                    <ATextField label="Dosage" name={`medicalLog.medications[${index}].doses`} type="text" placeholder="Enter dosage"/>                            
                </div>
                <div className="col-md-4 form-group">                                
                    <ADatePickerV3 label="Start Date" 
                        name={`medicalLog.medications[${index}].startDate`} 
                        placeholder={MettaSvr_Common.DateFormat} 
                        showPreviousMonths
                        showYearDropdown 
                        filterDate={dateFilterFunc}
                        dateFormat={MettaSvr_Common.DateFormatV1}
                        saveDateFormat={MettaSvr_Common.DateFormat}                                        
                        />                    
                </div>                        
            </div>
        </div>
    ))
}
export {medicalHistoryRowComponent, surgeryComponent, medicationComponent, medicalHistoryPrefix, surgeryHistoryPrefix, medicationHistoryPrefix}