content: import React from 'react';
  import PropTypes from 'prop-types';
  import shortid from 'shortid';
  
  const SurveyQuestions = ({
    currentPage,
    pagesLength,
    questionsNumber,
    maxPagesPerSurvey,
    maxQuestionsPerPage,
    addQuestion,
    addFlashMessage,
    onAddNewPage
   }) => {
  
    const onAddQuestion = (type) => {
      let page = null;
      if (checkCapacity()) {
        if (currentPage === pagesLength && questionsNumber / currentPage < 10) {
          page = currentPage;
        } else if (currentPage !== pagesLength && questionsNumber / currentPage == 10) {
          onAddNewPage();
          page = currentPage + 1;
        } else {
          onAddNewPage();
          page = currentPage + 1;
        }      
        let question = {
          id: shortid.generate(),
          number: questionsNumber + 1,
          title: `${type} Choice Question`,
          page: page,
          type: type,
          answers: type == 'Single' || type == 'Multiple'
            ? ['Answer 1', 'Answer 2', 'Answer 3']
            : type == 'Star'
              ? ['5☆', '4☆', '3☆', '2☆', '1☆']
              : type == 'Range'
                ? ['5', '4.5', '4', '3.5', '3', '2.5', '2', '1.5', '1', '0.5', '0']
                : [],
          isMandatory: false,
          value: []
        };
        addQuestion(question);
      }
    };
  
    const checkCapacity = () => {
      if (questionsNumber
        >= maxQuestionsPerPage * maxPagesPerSurvey) {
        addFlashMessage({
          type: 'warning',
          text: `Sorry, you have exceeded the maximum amount of questions per survey. 
          To add more, please remove the unnecessary ones.`
        });
        return false;
      } else {
        return true;
      }
    };
  
    return (
      <div className="panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title text-center">Type of questions</h3>
        </div>
        <div className="panel-body">
          <ul className="nav nav-pills nav-stacked">
            <li>
              <a className="pointer" onClick={() => onAddQuestion('Single')}
                type="button">
                <i className="fa fa-list-ul" aria-hidden="true"></i>
                &nbsp;Single Choice Question
              </a>
            </li>
            <li>
              <a className="pointer" onClick={() => onAddQuestion('Multiple')}
                type="button">
                <i className="fa fa-list-ol" aria-hidden="true"></i>
                &nbsp;Multiple Choice Question
              </a>
            </li>
            <li>
              <a className="pointer" onClick={() => onAddQuestion('Text')}
                type="button">
                <i className="fa fa-font" aria-hidden="true"></i>
                &nbsp;Text
              </a>
            </li>
            <li>
              <a className="pointer" onClick={() => onAddQuestion('File')}
                type="button">
                <i className="fa fa-file" aria-hidden="true"></i>
                &nbsp;File
              </a>
            </li>
            <li>
              <a className="pointer" onClick={() => onAddQuestion('Star')}
                type="button">
                <i className="fa fa-star-o" aria-hidden="true"></i>
                &nbsp;Star Rating
              </a>
            </li>
            <li>
              <a className="pointer" onClick={() => onAddQuestion('Range')}
                type="button">
                <i className="fa fa-minus" aria-hidden="true"></i>
                &nbsp;Range Question
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  };
  
  SurveyQuestions.propTypes = {
    onAddNewPage: PropTypes.func.isRequired,
    addQuestion: PropTypes.func.isRequired,
    addFlashMessage: PropTypes.func.isRequired,
    currentPage: PropTypes.number.isRequired,
    pagesLength: PropTypes.number.isRequired,
    questionsNumber: PropTypes.number.isRequired,
    maxQuestionsPerPage: PropTypes.number.isRequired,
    maxPagesPerSurvey: PropTypes.number.isRequired
  };
  
  export default SurveyQuestions;
  