import React from 'react'
import {ATextField, AOptionbox, RadioButtons } from '../../../form-fields/form-field.component'
import './smoke-log.styles.scss'
import { q1Options, q2Options, q3Options, q4Options, q5Options, q6Options, questions} from './smoke-logs.questions.options'
import { useState } from 'react'
const SmokeLogCardComponent = ({ readOnly }) => {

    const [summation, setSummuation ] = useState(0)
    const  [previousEntries, setPreviousEntries] = useState(Array(6).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 Smoke</h3>
            <div className="wrapper-form-box my-3">
                <div className="card card-body bg-light-color">
                    <h4>Fagerstrom Test for Nicotine Dependence</h4>
                    <p>Instructions: Answer the following questions. Nicotine dependence is based on the total score.</p>
                </div>
{/* Q1 */}
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["wakeupsmoke"]}</p>}
                        name="smokeLog.wakeupsmoke"
                        options={q1Options}
                        data-index={0}
                        doChanged={optionChanged}
                    />                    
                </div>
{/* Q2 */}
                <div className="form-group">
                    <RadioButtons 
                            label={<p className="font-weight-bold">{questions["forbiddensmoke"]}</p>}
                            name="smokeLog.forbiddensmoke"                            
                            options={q2Options}
                            data-index={1}
                            doChanged={optionChanged}
                        />                                       
                                                    
                </div>
{/* Q3 */}
                <div className="form-group">
                    <RadioButtons 
                            label={<p className="font-weight-bold">{questions["hatesmoke"]}</p>}
                            name="smokeLog.hatesmoke"
                            doChanged={optionChanged}
                            data-index={2}
                            options={q3Options}
                        />                          
                </div>
{/*  Q4 */}
                <div className="form-group">
                    <RadioButtons 
                            label={<p className="font-weight-bold">{questions["countsmoke"]}</p>}
                            name="smokeLog.countsmoke"
                            doChanged={optionChanged}
                            data-index={3}
                            options={q4Options}
                        />                          
                    
                </div>

{/*  Q5 */}                
                <div className="form-group">
                    <RadioButtons 
                            label={<p className="font-weight-bold">{questions["frequencysmoke"]}</p>}
                            name="smokeLog.frequencysmoke"
                            doChanged={optionChanged}
                            data-index={4}
                            options={q5Options}
                        />                      
                </div>

{/*  Q6 */}                
                <div className="form-group">
                    <RadioButtons 
                            label={<p className="font-weight-bold">{questions["illsmoke"]}</p>}
                            name="smokeLog.illsmoke"
                            doChanged={optionChanged}
                            options={q6Options}
                            data-index={5}
                        />                                      
                </div>
                <div className="total mt-3 pt-3">
                    {
                        readOnly ?
                        (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                        name="smokeLog.total" type="text" />):                            
                        (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                        name="smokeLog.total" type="text"  value={summation}/> )
                    }                           
                </div>
                {/*  static text begin */}
                <blockquote className="blockquote-left bg-light-color">
                    <p className="mb-2">Those with lower levels of dependence might not need quit smoking medications. Support, information and resources help everyone quit smoking.</p>
                    <footer className="blockquote-footer">
                        <cite>(Source: Heatherton TF, Kozlowski LT, Frecker RC, Fagerstrom KO. The Fagerstrom Test for Nicotine Dependence)</cite>
                    </footer>
                </blockquote>
            </div>
            <div className="box-top-border pt-5">
                <div className="card card-body bg-light-color">                
                    <h3 className="no-m">Health Effects of Second-Hand Smoke</h3>
                </div>
                <ul>
                    <li>Second-hand smoke is the smoke that comes from the tip of a burning cigarette, and when a smoker exhales.</li>
                    <li>Two thirds of smoke from a cigarette is not inhaled by the smoker, but enters the air around the smoker.</li>
                    <li>Second-hand smoke is more dangerous than smoke that is directly inhaled. It has twice the nicotine and tar as the smoke inhaled by the smoker.</li>
                    <li>Second-hand smoke releases over 4,000 chemical compounds, 60 of which are associated with, or known to cause cancer.</li>
                    <li>Second-hand smoke causes disease and death in healthy non-smokers and promotes the formation of blood clots that can lead to heart attacks and strokes.</li>
                    <li>Second-hand smoke increases a non-smokers risk of getting either lung cancer or heart disease by 20%</li>
                    <li>Infants exposed to second-hand smoke are more likely to die from Sudden Infant Death Syndrome (SIDS)</li>
                    <li>Children regularly exposed to second-hand smoke are at least 50% more likely to suffer damage to their lungs and breathing problems such as asthma.</li>
                </ul>
                <p className="font-weight-bold">Short-term effects of Second-Hand Smoke include:</p>
                <ul>
                    <li>eye irritation</li>
                    <li>headache</li>
                    <li>nasal discomfort and sneezing</li>
                    <li>cough and sore throat</li>
                    <li>nausea and dizziness</li>
                    <li>increased heart rate and blood pressure</li>
                    <li>increased risk for people with heart disease (angina), asthma, allergies</li>
                </ul>
                <p className="font-weight-bold">Exposure to second-hand smoke CAUSES the following diseases and conditions:</p>
                <div className="col-md-6 two-col">
                    <p className="font-weight-bold">Children:</p>
                    <ul>
                        <li>Sudden Infant Death Syndrome (SIDS)</li>
                        <li>Low birth weight</li>
                        <li>Bronchitis, pneumonia and other  Nasal sinus cancer respiratory infections</li>
                        <li>Asthma</li>
                        <li>Chronic respiratory symptoms</li>
                        <li>Ear infections</li>
                    </ul>
                </div>
                <div className="col-md-6 two-col">
                    <p className="font-weight-bold">Adults:</p>
                    <ul>
                        <li>Heart disease</li>
                        <li>Lung cancer</li>
                        <li>Nasal sinus cancer</li>
                        <li>Asthma</li>
                    </ul>
                </div>
                <div className="clearfix"></div>
                <p className="font-weight-bold">Exposure to second-hand smoke IS ASSOCIATED with the following diseases and conditions:</p>
                <div className="col-md-6 two-col">
                    <p className="font-weight-bold">Children:</p>
                    <ul>
                        <li>Impacts learning and behavioral development</li>
                        <li>Decreased lung function</li>
                        <li>Exacerbation of cystic fibrosis</li>
                        <li>Brain cancer and lymphomas</li>
                    </ul>
                </div>
                <div className="col-md-6 two-col">
                    <p className="font-weight-bold">Adults:</p>
                    <ul>
                        <li>Stroke</li>
                        <li>Breast cancer</li>
                        <li>Cervical cancer</li>
                        <li>Miscarriages</li>
                        <li>Chronic respiratory symptoms</li>
                    </ul>
                </div>
            
            </div>            
        </fieldset>)
    
}

export default SmokeLogCardComponent