import React from 'react';
import PropTypes from 'prop-types';

/**
 * A stateless question counter. 
 * Label field will display question counter with max and min counter.
 */

const QuestionCounter = (props) => {

    let labelProps = { ...props };
    delete labelProps.questionText;
    delete labelProps.currentCounter;
    delete labelProps.maxCounter;

    return (<div role='textbox' tabIndex='0' className='jp-question-counter'>
        {props.currentCounter <= props.maxCounter && props.currentCounter > 0 && props.maxCounter > 0 ?
            <p id='spnQuestionCounter' name='QuestionCounter' className='jp-question-counter-text' aria-label={'On going Question ' + props.currentCounter + ' Total no of Questions ' + props.maxCounter}>
                {props.questionText} {props.currentCounter}/{props.maxCounter}
            </p> : null}
    </div>);

};

export default QuestionCounter;

QuestionCounter.defaultProps = {
    /** Text for label field */
    questionText: 'QUESTION',
    /** Number to show on which question user is */
    currentCounter: 1,
    /** Number to show total number of questions */
    maxCounter: 5,
};

QuestionCounter.propTypes = {
    /** Text for label field */
    questionText: PropTypes.string,
    /** Number to show on which question user is */
    currentCounter: PropTypes.number,
    /** Number to show total number of questions */
    maxCounter: PropTypes.number
};