content: import React from 'react';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  
  class TextQuestion extends React.Component {
    constructor() {
      super();
      this.state = {
        answered: 0,
        skipped: 0,
        data: []
      };
    }
  
    componentWillMount() {
      let data = [];
      for (let i = 0; i < this.props.questionAnswers.length; i++) {
        data.push(this.props.questionAnswers[i]);
      }
      this.setState({
        answered: this.props.questionAnswers.length,
        skipped: this.props.totalAnswers - this.countAnsweredQuestions(this.props.questionAnswers),
        data: data
      });
    }
  
    countAnsweredQuestions(array) {
      return array.reduce((n, x) => n + (x.isPassed === true), 0);
    }
    render() {
      const { answered, skipped, data } = this.state;
      const { question, hasMandatoryLabel, number, showIndividualResponse } = this.props;
      return (
        <div className="row">
          <div className="col-sm-12 col-md-12">
            <h5 className={classnames('text-center',
              { 'required': question.isMandatory && hasMandatoryLabel })}
            >
              Question {number}. {question.title}
            </h5>
            <span className="text-center help-block">
              Answered: {answered}, Skipped: {skipped}
            </span>
            <div className="table-responsive">
              <table className="table table-striped table-hover">
                <thead>
                  <tr>
                    <th className="text-center">Answers</th>
                    <th className="text-center">Link</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((item, key) => {
                    return (
                      item.answer !== undefined && <tr key={key}>
                        <td className="text"><span>{item.answer}</span></td>
                        {question.type === 'File' && <td className="text text-center">
                          <a href={item.answer}>Download</a>
                        </td>}
                        {question.type === 'Text' && <td className="text text-center">
                          <span>
                            <a
                              className="pointer"
                              type="button"
                              onClick={() => showIndividualResponse(item.respondentId)}
                            >
                              Show Results
                            </a>
                          </span>
                        </td>}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      );
    }
  }
  
  TextQuestion.propTypes = {
    question: PropTypes.object.isRequired,
    questionAnswers: PropTypes.array.isRequired,
    hasMandatoryLabel: PropTypes.bool.isRequired,
    number: PropTypes.number.isRequired,
    totalAnswers: PropTypes.number.isRequired,
    showIndividualResponse: PropTypes.func,
  };
  
  export default TextQuestion;
  