import React,{ Component } from "react";
import {QuillForEditor,MarkdownToHtml} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader'


class NullDisplay extends Component{
  constructor(props){
    super(props);


    this.state = {
      question_choices: ['', '', '', ''],
      standard_answers: [false, false, false, false]
    }
  }
  componentDidMount = () => {
    const Id = this.props.match.params.Id
    this.isEdit = !!Id
    if (Id) {
      const url = `/exercises/${Id}/edit.json`
    //   axios.get(url)
    //     .then((response) => {
    //       if (response.data.status == 0) {

    //       }
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    }
  }
  render() {
    let { question_type, standard_answer,
        question_id,index,
     } = this.props;

    const qNumber = `question_${index}`;
    /**
    is_ordered: true
    multi_count: 3
    question_id: 10444
    question_number: 6
    question_score: 2
    question_title: "_2323_↵↵_"
    question_type: 3
    standard_answer: [{choice_id: 1, answer_text: ["2", "22"]}]
     */

    return(
        <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
            <style>{`
                .answers {
                    flex: 1;
                    display: inline-block;
                }
                .answers .answer {
                    background: #EDEDED;
                    color: #C5C5C5;
                    
                    display: inline-block;
                    line-height: 16px;
                    padding:12px 10px;
                    margin-bottom:10px;
                    border-radius:2px;
                    width: 1024px;
                    word-break: break-all;
                }
                .answerRow { 
                    padding: 1px 0;
                }
                .answers .markdown-body > p{
                    line-height:20px;
                }
            `}</style>

            <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
            <div className="options">
                {
                    standard_answer.map((answers, _index) => {
                        return <div className="df answerRow" key={_index}>
                            <span className="lineh-40">答案（填空{_index+1}）：</span>
                            <div className="answers">
                                { answers.answer_text.map((item, itemIndex) => {
                                    return(
                                      !this.props.exercise||this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml
                                        className="answer" key={itemIndex}
                                        content={item} selector={'null_' + (index + 1) + (_index + 1) + (itemIndex + 1)}
                                      ></MarkdownToHtml>:<QuillForEditor
                                        readOnly={true}
                                        style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
                                        value={item?JSON.parse(item):""}
                                        // showUploadImage={this.handleShowUploadImage}
                                      />
                                    )

                                })}
                            </div>
                        </div>
                    })
                }


            </div>
        </div>
      )
    }
}
// RouteHOC()
export default (NullDisplay);