import React, {useState, useRef, useEffect }  from 'react'

import { Button, ButtonGroup } from 'react-bootstrap'
import { bmiCalculation } from '../../../utility/Utils'
import {ATextField, ATextArea,
    ADatePickerV2,ADatePickerV3, RadioButtons, CheckboxGroup} from '../../../form-fields/form-field.component'
import GenericModalComponent from '../../../utility/hoc/modal-views/generic.modal.component'
import measurement from './assets/images/measure.jpg'
import './medical-logs.styles.scss'
import { MedicalLog_Enums, MettaSvr_Common } from '../../../../redux/helpers/action-enums'
import { genderOptions, familyHistoryOptions, addictionOptions, medicalHistoryOptions} from './medical-logs.questions.options'
import {
    medicalHistoryRowComponent, surgeryComponent, medicationComponent
} from './util-components'
import { notAfterToday } from '../../../utility/Utils'
import {initialValues} from './medical-logs.initial-values'

const MedicalLogCardComponent = ({theForm, readOnly}) => {

    useEffect(() =>{
        // console.log("mounted with ",theForm)       
    },[])
    
    const [showMeasurementModal, setShowMeasurementModal] = useState(false)
    const [otherOptions, setOtherOptions] = useState(false)
    const [heightInMtrs, setHeightInMtrs] = useState("")
    const [weightInKg, setWeightInKg] = useState("")
    const [bmi, setBmi] = useState("")
    const bmiRef= useRef(null)
    
    const [medicalHistories,setMedicalHistories] = useState(readOnly ? theForm.medicalHistory.length : 1)
    const [medications,setMedications] = useState(readOnly ? theForm.medications.length : 1)
    const [surgeries,setSurgeries] = useState(readOnly ? theForm.surgeryDetails.length:  1)

    const handleWeightChange = val => setWeightInKg(val)
    const handleHeightChange = val => setHeightInMtrs(val)

    const medicalHistoryChanged = e => {
        // console.log(e.target.value)
        e.target.value ===  MedicalLog_Enums.MedicalHistoryCTEnum.Other ? setOtherOptions(true) : setOtherOptions(false)
    }
    
    useEffect(() => {        
        const calcBmi = bmiCalculation(weightInKg, heightInMtrs)
        setBmi(calcBmi.toFixed(2))        
    },[weightInKg, heightInMtrs])
    
    
    // add + remove button events
    const addMedicalHistory = () => {
        
        theForm['medicalHistory'].push(initialValues.medicalLog.medicalHistory[0])
        setMedicalHistories(medicalHistories + 1)
        // console.log(theForm)
    }
    const removeMedicalHistory = () => {
        theForm['medicalHistory'].pop()
        setMedicalHistories(Math.max(1, medicalHistories - 1))
        // console.log(theForm)
    }

    const addSurgery = () => {
        theForm['surgeryDetails'].push(initialValues.medicalLog.surgeryDetails[0])
        setSurgeries(surgeries + 1)
        // console.log(theForm)
    }
    const removeSurgery = () => {
        theForm['surgeryDetails'].pop()
        setSurgeries(Math.max(1, surgeries - 1))
        // console.log(theForm)
    }
    
    const addMedication = () => {
        theForm['medications'].push(initialValues.medicalLog.medications[0])
        setMedications(medications + 1)
        // console.log(theForm)
    }
    const removeMedication = () => {
        theForm['medications'].pop()
        setMedications(Math.max(1, medications - 1))
        // console.log(theForm)
    }


    // ---------

    return (
        <fieldset disabled={readOnly}>
            <h3 className="fs-title">Medical Logs</h3>

            <div className="form-row">
                <div className="col-md-12 form-group">
                
                <ADatePickerV3 label="Date of birth"
                    placeholder="Enter Date of Birth" 
                    name="medicalLog.dob"                     
                    dateFormat={MettaSvr_Common.DateFormatV1}
                    saveDateFormat={MettaSvr_Common.DateFormat}
                    showPreviousMonths
                    showYearDropdown                    
                    filterDate={notAfterToday}
                />
                </div>
                
                <div className="form-group col-md-12">
                    <RadioButtons 
                        label="Gender"
                        name="medicalLog.gender"
                        inline
                        options={genderOptions}
                    />                 
                </div>                
            </div>

            <div className="form-row">
                <div className="col-md-12 form-group">
                    <CheckboxGroup 
                        label="Family History"
                        name="medicalLog.familyHistoryIds"
                        options={familyHistoryOptions}
                    />                 

                </div>
            </div>            

            <div className="form-row">
                <div className="col-md-12 form-group">
                    <div className="inputgroup">
                        <span className="groupname">Medical History</span>
                        {
                            !readOnly ?
                                <ButtonGroup size="sm">
                                    <Button onClick={addMedicalHistory}>Add</Button>
                                    <Button variant="danger" onClick={removeMedicalHistory}>Delete</Button>                                                        
                                </ButtonGroup>
                            : null
                        }
                        
                        
                        <div className={`${otherOptions ? 'other-option d-block' : 'd-none'}`}>
                            <div className="col-md-12 form-group">
                                <ATextArea label="Other Medical History" name="medicalLog.medicalHistory[1].diseaseType" rows="3" />                                
                            </div>

                            <div className="form-row">
                                <div className="col-md-6 form-group">
                                    <ADatePickerV3 label="From Year" 
                                        name="medicalLog.medicalHistory[1].fromDate" 
                                        placeholder="Enter From Year" 
                                        showPreviousMonths
                                        showYearDropdown                                    
                                        dateFormat={MettaSvr_Common.DateFormatV1}
                                        saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                        filterDate={notAfterToday}
                                    />                                      
                                </div>
                                <div className="col-md-6 form-group">
                                    <ADatePickerV3 
                                        label="To Year" 
                                        name="medicalLog.medicalHistory[1].toDate" 
                                        placeholder="Enter To Year" 
                                        showPreviousMonths
                                        showYearDropdown                                    
                                        dateFormat={MettaSvr_Common.DateFormatV1}
                                        saveDateFormat={MettaSvr_Common.DateFormat}                                        
                                        filterDate={notAfterToday}
                                    />                                                           
                                </div>
                            </div>
                        </div>
                        {medicalHistoryRowComponent(medicalHistories, medicalHistoryOptions,medicalHistoryChanged, notAfterToday)}
                    </div>
                </div>
            </div>

            {/* surgeries */}
            <div className="form-row">
                <div className="col-md-12 form-group">
                    <div className="inputgroup">
                        <span className="groupname">Surgery</span>
                        {
                            !readOnly ?
                                <ButtonGroup size="sm">
                                    <Button onClick={addSurgery}>Add</Button>
                                    <Button variant="danger" onClick={removeSurgery}>Delete</Button>                                                        
                                </ButtonGroup>:
                            null
                            
                        }

                        {surgeryComponent(surgeries, notAfterToday)}
                    </div>
                </div>
            </div>

            {/* medications */}
            <div className="form-row">
                <div className="col-md-12 form-group">
                    <div className="inputgroup">
                        <span className="groupname">Medications</span>
                        {
                            !readOnly ?
                                <ButtonGroup size="sm">
                                    <Button onClick={addMedication}>Add</Button>
                                    <Button variant="danger" onClick={removeMedication}>Delete</Button>                                                        
                                </ButtonGroup>:
                            null
                        }
                        {medicationComponent(medications, notAfterToday)}
                        
                    </div>
                </div>
            </div>

            {/* addictions */}
            <div className="form-row">
                <div className="col-md-12 form-group">
                    <CheckboxGroup 
                            label="Addiction to tick"
                            name="medicalLog.addictionIds"
                            options={addictionOptions}
                        />                                     
                </div>
            </div>  
            {/* Height, Weight, Waist, BMI, BP  */}
            <div className="form-row">
                <div className="col-md-4 form-group">
                    {
                        readOnly ?
                            <ATextField label="Height" name="medicalLog.heightInMeter" type="text"
                                />
                            :
                            <ATextField label="Height" name="medicalLog.heightInMeter" type="text" placeholder="in m."
                                value={heightInMtrs} handlechange={handleHeightChange} />

                    }
                </div>
            
                <div className="col-md-4 form-group">
                    {
                        readOnly ?
                            <ATextField label="Weight" name="medicalLog.weightInKgs" type="text"  />
                        :
                            <ATextField label="Weight" name="medicalLog.weightInKgs" type="text" placeholder="in Kg" 
                                value={weightInKg} handlechange={handleWeightChange} />
                        
                    }
                </div>
            
                <div className="col-md-4 form-group">
                    <ATextField groupicon="icon-question" label="Waist circumference" 
                        name="medicalLog.waistCurInCms" type="text" placeholder="in cms" groupiconaction={() => setShowMeasurementModal(true)}
                        />
                </div>
            </div>            
            <div className="form-row">
                <div className="col-md-6 form-group">
                    {
                        readOnly ? 
                            <ATextField label="BMI" name="medicalLog.bmi" type="text" 
                                ref={bmiRef}
                                placeholder="BMI"/>
                            :
                            <ATextField label="BMI" name="medicalLog.bmi" type="text" 
                                ref={bmiRef}
                                placeholder="BMI" value={bmi}/>                            
                    }
                </div>
            
                <div className="col-md-6 form-group">
                    <ATextField label="BP" name="medicalLog.bpInMmhg" type="text" placeholder="120/80"/>
                </div>
            </div>

            {/* show modal view */}
            <GenericModalComponent
                show={showMeasurementModal}
                onHide={() => setShowMeasurementModal(false)}
                title={"Waist circumference"}
            >
                <img src={measurement} className="fit-width" alt="no-image" />
            </GenericModalComponent>
    </fieldset>


    )

}

export default MedicalLogCardComponent