import React, {useState} from 'react'
import {ATextField, RadioButtons } from '../../../form-fields/form-field.component'
import {q1Options, q2Options, q3Options, q4Options, 
    q5Options, q6Options, q7Options, q8Options, q9Options, q10Options, questions} from './depression-log.questions.options'
import './depression-log.styles.scss'

const DepressionLogCardComponent = ({readOnly}) => {
    const [summation, setSummuation ] = useState(0)
    const  [previousEntries, setPreviousEntries] = useState(Array(10).fill(0))

    const optionChanged = (e) => {
        const index = parseInt(e.target.dataset.index)
        const localPrevious = previousEntries
        localPrevious[index] = parseInt(e.target.value)
        setPreviousEntries(localPrevious)
        setSummuation(previousEntries.reduce((a, b) => a + b))

    }


    return (        
        <fieldset disabled={readOnly}>
            <h3 className="fs-title">Form for Depression</h3>
            <div className="wrapper-form-box my-3">
            <div className="card card-body bg-light-color">
                    <h4>Patient Health Questionnaire (PHQ-9)</h4>
                    <p>Over the last 2 weeks, how often have you been bothered by any of the following problems?</p>
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ1"]}</p>}
                            name="depressionLog.depressionQ1"                            
                            options={q1Options}
                            data-index={0}
                            doChanged={optionChanged}
                        />                       
                                        
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ2"]}</p>}
                            name="depressionLog.depressionQ2"                            
                            options={q2Options}
                            data-index={1}
                            doChanged={optionChanged}
                        />                       
                </div>

                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ3"]}</p>}
                            name="depressionLog.depressionQ3"                            
                            options={q3Options}
                            data-index={2}
                            doChanged={optionChanged}
                        />                      
                </div>

                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ4"]}</p>}
                            name="depressionLog.depressionQ4"                            
                            options={q4Options}
                            data-index={3}
                            doChanged={optionChanged}
                        />                       
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ5"]}</p>}
                            name="depressionLog.depressionQ5"                            
                            options={q5Options}
                            data-index={4}
                            doChanged={optionChanged}
                        />                       
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ6"]}</p>}
                            name="depressionLog.depressionQ6"                            
                            options={q6Options}
                            data-index={5}
                            doChanged={optionChanged}
                        />                                           
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ7"]}</p>}
                            name="depressionLog.depressionQ7"                            
                            options={q7Options}
                            data-index={6}
                            doChanged={optionChanged}
                        />                                           
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ8"]}</p>}
                            name="depressionLog.depressionQ8"                            
                            options={q8Options}
                            data-index={7}
                            doChanged={optionChanged}
                        />                                           
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ9"]}</p>}
                            name="depressionLog.depressionQ9" 
                            options={q9Options}
                            data-index={8}
                            doChanged={optionChanged}
                        />                                           
                </div>

                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["depressionQ10"]}</p>}
                            name="depressionLog.depressionQ10" 
                            options={q10Options}
                            data-index={9}
                            doChanged={optionChanged}
                        />                      
                </div>
                <div className="total mt-3 pt-3">
                {
                        readOnly ? 
                        (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                            name="depressionLog.total" type="text"/>):                             
                        (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                            name="depressionLog.total" type="text" value={summation}/>)                             
                }                          
                </div>
                <blockquote className="blockquote-left bg-light-color">
                    <p>Copyright &copy; 1999 Pfizer Inc. All rights reserved. Reproduced with permission. PRIME-MD &copy; is a trademark of Pfizer Inc. A2663B 10-04-2005</p>
                </blockquote>
            </div>

            <div className="box-top-border pt-5">
                <div className="card card-body bg-light-color mb-3">
                    <h3 className="no-m">PHQ-9 Patient Depression Questionnaire</h3>
                </div>
                <p className="font-weight-bold">For initial diagnosis:</p>
                <ol>
                    <li>Patient completes PHQ-9 Quick Depression Assessment.</li>
                    <li>If there are at least 4 &#10004; s in the shaded section (including Questions #1 and #2), consider a depressive disorder. Add score to determine severity.</li>
                </ol>
                <p className="m-t-sm"><span className="font-weight-bold">Consider Major Depressive Disorder</span></p>
                <p className="m-t-0">- if there are at least 5 &#10004; s in the shaded section (one of which corresponds to Question #1 or #2)</p>
                <p className="m-t-sm"><span className="font-weight-bold">Consider Other Depressive Disorder</span></p>
                <p className="m-t-0">- if there are 2-4 &#10004; s in the shaded section (one of which corresponds to Question #1 or #2)</p>
                <p className="m-t-sm"><span className="font-weight-bold">Note:</span> Since the questionnaire relies on patient self-report, all responses should be verified by the clinician, and a definitive diagnosis is made on clinical grounds taking into account how well the patient understood the questionnaire, as well as other relevant information from the patient. <br/> Diagnoses of Major Depressive Disorder or Other Depressive Disorder also require impairment of social, occupational, or other important areas of functioning (Question #10) and ruling out normal bereavement, a history of a Manic Episode (Bipolar Disorder), and a physical disorder, medication, or other drug as the biological cause of the depressive symptoms.</p>
                <p className="m-t-sm"><span className="font-weight-bold">To monitor severity over time for newly diagnosed patients or patients in current treatment for depression:</span></p>
                <ol>
                    <li>Patients may complete questionnaires at baseline and at regular intervals (eg, every 2 weeks) at home and bring them in at their next appointment for scoring or they may complete the questionnaire during each scheduled appointment.</li>
                    <li>Add up &#10004; s by column. For every &#10004; : Several days = 1 More than half the days = 2 Nearly every day = 3</li>
                    <li>Add together column scores to get a TOTAL score.</li>
                    <li>Refer to the accompanying <span className="font-weight-bold">PHQ-9 Scoring Box</span> to interpret the TOTAL score.</li>
                    <li>Results may be included in patient files to assist you in setting up a treatment goal, determining degree of response, as well as guiding treatment intervention.</li>
                </ol>
                <p className="m-t-sm"><span className="font-weight-bold">Scoring: add up all checked boxes on PHQ-9</span></p>
                <p className="m-t-0">For every 3 Not at all = 0; Several days = 1; <br/> More than half the days = 2; Nearly every day = 3</p>
                <p className="m-t-sm"><span className="font-weight-bold">Interpretation of Total Score</span></p>
                <table className="table table-bordered bottom-table">
                    <thead>
                        <tr>
                            <th width="50%">&nbsp;</th>
                            <th width="50%">Depression Severity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="center">1-4</td>
                            <td>Minimal depression</td>
                        </tr>
                        <tr>
                            <td align="center">5-9</td>
                            <td>Mild depression</td>
                        </tr>
                        <tr>
                            <td align="center">10-14</td>
                            <td>Moderate depression</td>
                        </tr>
                        <tr>
                            <td align="center">15-19</td>
                            <td>Moderately severe depression</td>
                        </tr>
                        <tr>
                            <td align="center">20-27</td>
                            <td>Severe depression</td>
                        </tr>
                    </tbody>
                </table>
                <p className="m-t-sm">PHQ9 Copyright &copy; Pfizer Inc. All rights reserved. Reproduced with permission. PRIME-MD &reg; is a trademark of Pfizer Inc.</p>
            </div>
        </fieldset> )
    
}

export default DepressionLogCardComponent;