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

const ErectileLogCardComponent = ({readOnly}) => {

    const [summation, setSummuation ] = useState(0)
    const  [previousEntries, setPreviousEntries] = useState(Array(5).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 Erectile Dysfunction</h3>
            <div className="wrapper-form-box my-3">
                <div className="card card-body bg-light-color">            
                    <h4>The IIEF-5 Questionnaire (SHIM)</h4>
                    <p>Please encircle the response that best describes you for the following five questions</p>
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["q1"]}</p>}
                            name="erectileLog.q1"                            
                            options={q1Options}
                            data-index={0}
                            doChanged={optionChanged}
                        />   
                    
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["q2"]}</p>}
                            name="erectileLog.q2"                            
                            options={q2Options}
                            data-index={1}
                            doChanged={optionChanged}
                        />                    
                </div>

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

                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["q4"]}</p>}
                            name="erectileLog.q4"                            
                            options={q4Options}
                            data-index={3}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="form-group">
                    <RadioButtons 
                        label={<p className="font-weight-bold">{questions["q5"]}</p>}
                            name="erectileLog.q5"                            
                            options={q5Options}
                            data-index={4}
                            doChanged={optionChanged}
                        />                     
                </div>
                <div className="total mt-3 pt-3">
                {
                    readOnly ?
                    (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                        name="erectileLog.total" type="text"/>):
                    (<ATextField label={<p className="font-weight-bold">Total Score:</p>} 
                        name="erectileLog.total" type="text" value={summation}/>)                            
                }
                </div>
            </div>
            <div className="box-top-border pt-5">
                <table className="table table-bordered bottom-table">
                    <thead>
                        <tr>
                            <th width="50%">Score range</th>
                            <th width="50%">Erection Severity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="center">1-7</td>
                            <td> Severe ED </td>
                        </tr>
                        <tr>
                            <td align="center">8-11</td>
                            <td>Moderate ED</td>
                        </tr>
                        <tr>
                            <td align="center">12-16</td>
                            <td>Mild-moderate ED</td>
                        </tr>
                        <tr>
                            <td align="center">17-21</td>
                            <td>Mild ED</td>
                        </tr>
                        <tr>
                            <td align="center">22-25</td>
                            <td>No ED</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </fieldset>
    )
}

export default ErectileLogCardComponent