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

const AlcoholLogCardComponent = ({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 Alcohol</h3>
            <div className="wrapper-form-box my-3">
                <div className="card card-body bg-light-color">
                    <h4>AUDIT Alcohol Screening Tool</h4>
                    <p>The AUDIT (Alcohol Use Disorders Identification Test) is an effective and reliable screening tool for detecting risky and harmful drinking patterns<sup>1</sup>.</p>
                    <p className="m-t-xxs"><span className="font-weight-bold">INSTRUCTIONS:</span> by completing the following questions in the AUDIT Alcohol Screen you will be able to assess whether your drinking is putting you at risk of alcohol-related harm:</p>
                    <p className="m-t-xxs">1. Answer the following questions about your alcohol use during the <span className="font-weight-bold">past 12 months</span>.</p>
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["oftenDrinkAlcohol"]}</p>}
                            name="alcoholLog.oftenDrinkAlcohol"                            
                            options={q1Options}
                            data-index={0}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["countDrinks"]}</p>}
                            name="alcoholLog.countDrinks"                            
                            options={q2Options}
                            data-index={1}
                            doChanged={optionChanged}
                        />                       
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["sixorMoreDrinks"]}</p>}
                            name="alcoholLog.sixorMoreDrinks"                            
                            options={q3Options}
                            data-index={2}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["notStoppedDrinking"]}</p>}
                            name="alcoholLog.notStoppedDrinking"                            
                            options={q4Options}
                            data-index={3}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["failedExpectation"]}</p>}
                            name="alcoholLog.failedExpectation"                            
                            options={q5Options}
                            data-index={4}
                            doChanged={optionChanged}
                        />                    
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["drinkFirstThing"]}</p>}
                            name="alcoholLog.drinkFirstThing"                            
                            options={q6Options}
                            data-index={5}
                            doChanged={optionChanged}
                        />                    
                </div>
                
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["guiltFeeling"]}</p>}
                            name="alcoholLog.guiltFeeling"                            
                            options={q7Options}
                            data-index={6}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["noRemember"]}</p>}
                            name="alcoholLog.noRemember"                            
                            options={q8Options}
                            data-index={7}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["injuredDrinking"]}</p>}
                            name="alcoholLog.injuredDrinking"                            
                            options={q9Options}
                            data-index={8}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["suggestCutDrinking"]}</p>}
                            name="alcoholLog.suggestCutDrinking"                            
                            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="alcoholLog.total" type="text"/>):                             
                        (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                            name="alcoholLog.total" type="text" value={summation}/>)                             
                    }
                </div>
                <blockquote className="blockquote-left bg-light-color">
                    <p>The Alcohol Use Disorders Identification Test (AUDIT) World Health Organisation (WHO) has been adapted by the Mental Health Commission, 2018.</p>
                </blockquote>
            </div>

            <div className="box-top-border pt-5">
                <div className="card card-body bg-light-color mb-3">                
                    <h3>Note for Health or Allied Health Professional use:</h3>
                    
                    <p className="no-m no-p">Use the following as a guide in giving feedback to a patient/client about their score. <br/>
                        Remember: Ask permission to give feedback first and use a friendly and non-judgmental approach.</p>
                </div>
            
                
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th width="10%" >AUDIT Total Score</th>
                            <th width="10%" >Risk Level</th>
                            <th width="80%">ALCOHOL: Guide for Intervention & Feedback</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="center">0</td>
                            <td align="center">&nbsp;</td>
                            <td>Provide positive reinforcement and offer relevant literature (may be helpful to others)</td>
                        </tr>
                        <tr>
                            <td align="center">1-7</td>
                            <td align="center">Low risk</td>
                            <td>Discuss AUDIT score
                                <p>Discuss benefits of low-risk drinking:</p>
                                <p>– No more than 2 standard drinks per day</p>
                                <p>– No more than 4 standard drinks on a single occasion</p>
                                <p>– Aim for at least 2 alcohol free days per week</p>
                                <p>– If you are pregnant or breastfeeding NO alcohol is the safest option</p>
                                <p>Offer ‘Alcohol &amp; my health’ resource</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">8-12</td>
                            <td align="center">Risky</td>
                            <td>Discuss AUDIT score
                                <p className="font-weight-bold">If client is interested discuss:</p>
                                <p>Harms associated with moderate risk alcohol consumption</p>
                                <p>Tips and benefits for reducing alcohol consumption include:</p>
                                <p>– No more than 2 standards drinks per day</p>
                                <p>– No more than 4 standard drinks on a single occasion</p>
                                <p>– Aim for at least 2 alcohol free days per week</p>
                                <p>– If you are pregnant or breastfeeding NO alcohol is the safest option</p>
                                <p>Follow-up and referral and or offer alcohol resource</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">13+</td>
                            <td align="center">High risk</td>
                            <td>Discuss AUDIT score
                                <p className="font-weight-bold">If client is interested discuss:</p>
                                <p>Harms associated with high-risk alcohol consumption</p>
                                <p>Tips and benefits for reducing alcohol consumption (see above)</p>
                                <p>– <span className="font-weight-bold">Caution:</span> If the score is 13 or over advise client to seek medical advice before they
                                    make any changes to their alcohol consumption. This is due to the risk of medical
                                    complications such as seizure and death from alcohol withdrawal in people who are
                                    dependent on alcohol.</p>
                                <p>– Further medical assessment is recommended (see A Brief Guide to the Assessment and Treatment of Alcohol Dependence, MHC, 2018)</p>
                                <p>– Follow-up and referral and/or offer alcohol resource</p>
                                <p>– Recommended referral to: GP or contact the Alcohol & Drug Support Line for support and services in your area.</p>
                            </td>
                        </tr>
                    </tbody>
                </table>                                  
            </div>   
        </fieldset>) 
    
}

export default AlcoholLogCardComponent