import React, { Component } from "react"
import "./index.scss"
import classnames from "classnames"

class Question extends Component {
  handleSelect = (option) => {
    const { selectAnswer } = this.props
    if (selectAnswer) {
      selectAnswer(this.props.question, option.id)
      this.setState({
        selectedId: option.id,
      })
    }
  }

  render() {
    const { question, answer, activeIndex, category } = this.props
    return (
      <div className={"question-container"}>
        {
          <div className="question">
            {activeIndex !== undefined && `${activeIndex + 1}.`}
            {category && <span className={"category"}>{category}</span>}&nbsp;
            <span dangerouslySetInnerHTML={{ __html: question.ques }}></span>
          </div>
        }
        <ul className={"options"}>
          {!!question.options.length &&
            question.options.map((item, index) => {
              return (
                <li
                  key={item.id}
                  className={classnames({
                    active: answer && answer[question.id] === item.id,
                    error: item.user_select && !item.is_ans,
                    correct: item.is_ans,
                  })}
                  onClick={this.handleSelect.bind(this, item)}
                >
                  <div className={"letter"}>
                    {String.fromCharCode(65 + index)}
                  </div>
                  <div>{item.des}</div>
                </li>
              )
            })}
        </ul>
      </div>
    )
  }
}

export default Question