content: import React from 'react';
  import PropTypes from 'prop-types';
  import SurveyForm from './SurveyForm';
  
  const SurveyPage = ({
    id,
    currentPage,
    pagesCount,
    isSubmited,
    onSubmitSurvey,
    hasPageNumbers,
    hasMandatoryLabel,
    hasProgressIndication,
    hasQuestionNumbers,
    uploadFileRequest,
    onSetPage,
    onAnswerQuestion,
    questions,
    respondentId
  }) => {
  
    const onPageNext = (e) => {
      e.preventDefault();
      onSetPage(currentPage + 1);
    };
  
    const onPageBack = (e) => {
      e.preventDefault();
      onSetPage(currentPage + -1);
    };
  
    const progressBarValue = currentPage / pagesCount * 100;
  
    return (
      <div className="row">
        {hasPageNumbers && <h4 className="text-center">Page {id}</h4>}
        <div className="col-sm-12">
          <SurveyForm
            respondentId={respondentId}
            questions={questions}
            onAnswerQuestion={onAnswerQuestion}
            hasQuestionNumbers={hasQuestionNumbers}
            hasMandatoryLabel={hasMandatoryLabel}
            uploadFileRequest={uploadFileRequest}
          />
        </div>
        <div className="row">
          <div className="col-sm-12 col-md-12">
            <ul className="pager">
              {currentPage > 1 &&
                <li className="previous">
                  <a onClick={onPageBack} className="pointer">Back</a>
                </li>}
              {currentPage < pagesCount &&
                <li className="next">
                  <a className="pointer" onClick={onPageNext}>Next</a>
                </li>}
            </ul>
          </div>
        </div>
        {currentPage === pagesCount && <div className="row">
          <div className="col-sm-12 col-md-12 text-center panel-padding">
            <button
              disabled={isSubmited}
              onClick={onSubmitSurvey}
              className="btn btn-lg btn-success"
            >
              Submit
            </button>
          </div>
        </div>}
        <div className="row">
          <div className="col-sm-12 col-md-12">
            {hasProgressIndication && <div className="progress">
              <div
                className="progress-bar progress-bar-striped"
                role="progressbar"
                aria-valuenow={progressBarValue}
                aria-valuemin="0"
                aria-valuemax="100"
                style={{ width: progressBarValue + '%' }}
              >
                {progressBarValue + '%'}
              </div>
            </div>}
            <p className="text-center">Page {currentPage}/{pagesCount}</p>
          </div>
        </div>
      </div>
    );
  };
  
  SurveyPage.propTypes = {
    id: PropTypes.number,
    respondentId: PropTypes.string,
    pagesCount: PropTypes.number,
    currentPage: PropTypes.number,
    hasPageNumbers: PropTypes.bool,
    hasQuestionNumbers: PropTypes.bool,
    hasMandatoryLabel: PropTypes.bool,
    hasProgressIndication: PropTypes.bool,
    questions: PropTypes.array,
    onAnswerQuestion: PropTypes.func,
    onSubmitSurvey: PropTypes.func,
    onSetPage: PropTypes.func,
    isSubmited: PropTypes.bool,
    uploadFileRequest: PropTypes.func,
  };
  
  export default SurveyPage;
  