content: import React from 'react'
  import QuestionStatsByQuestion from './QuestionStatsByQuestion'
  import Select from 'react-select'
  import 'react-select/dist/react-select.css'
  import { TEXT_QUESTION } from '../../constants/QuestionTypes'
  
  class SurveyStatistics extends React.Component {
    constructor () {
      super()
  
      this.state = {
        selected: null,
        page: 0
      }
    }
  
    renderAnswer (question) {
      if (!question.selected || question.selected.length === 0) {
        return 'not answered'
      }
  
      if (question.selected instanceof Array) {
        return question.selected.join(', ')
      }
  
      return question.selected
    }
  
    renderSection () {
      const userId = this.state.selected && this.state.selected.value
  
      if (userId) {
        const currentPage = this.props.user[this.state.page]
  
        return currentPage && currentPage.map((question, index) =>
          <div key={index}>
            <h5>Question: "{question.question}"</h5>
            Answer: {this.renderAnswer(question)}
            <hr />
          </div>
        )
      } else {
        const currentPage = this.props.stats[this.state.page]
  
        const totalVotes = (question) => question.data.map(opt => opt.count).reduce((a, b) => a + b, 0)
  
        const statsTable = (question) => (
          <table className='table table-sm table-striped width-300 text-question-stats'>
            <thead>
              <tr>
                <th>#</th>
                <th>option</th>
                <th>votes</th>
                <th>percent</th>
              </tr>
            </thead>
            <tbody>
              {question.data.map((option, index) =>
                <tr key={index}>
                  <th>{index + 1}</th>
                  <td>{option.key}</td>
                  <td>{option.count}</td>
                  <td>{Math.floor(option.count / totalVotes(question) * 100)}%</td>
                </tr>
            )}
            </tbody>
          </table>
        )
  
        return currentPage && currentPage.map((question, index) => {
          return (
            <div key={index}>
              <h5>Question: "{question.question}"</h5>
              <div className='d-flex justify-content-start'>
                <QuestionStatsByQuestion
                  question={question}
                  selectUser={(u) => this.selectUser(u)}
                />
                {question.type !== TEXT_QUESTION && statsTable(question)}
              </div>
              <hr />
            </div>
          )
        })
      }
    }
  
    selectUser (user) {
      if (user) {
        this.props.getUserStats(user.value)
      }
      this.setState({selected: user})
    }
  
    render () {
      const activePage = (value) => value === this.state.page ? 'active' : ''
  
      return (
        <div>
          <h1 className='text-center margin-bottom'>
            Survey stats: "{this.props.surveyName}"
          </h1>
          <h6 className='text-center margin-bottom'>
            Pages: {this.props.pages}, Questions: {this.props.questions}
          </h6>
          <form>
            <span>Select user</span>
            <Select.Async
              className='width-300'
              name='form-field-name'
              value={this.state.selected}
              loadOptions={this.props.getUserNames}
              onChange={(item) => this.selectUser(item)}
            />
          </form>
          <div className='survey'>
            <ul className='nav nav-tabs'>
              {this.props.stats.map((page, index) =>
                <div
                  key={index}
                  className={`nav-item nav-link cursor ${activePage(index)}`}
                  onClick={() => this.setState({page: index})}
                >
                  {this.props.pageNames[index]}
                </div>
              )}
            </ul>
            <div className='survey-body' >
              {this.renderSection()}
            </div>
          </div>
        </div>
      )
    }
  }
  
  // const SurveyStatisticsWithRouter = withRouter(SurveyStatistics)
  
  export default SurveyStatistics
  