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


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


    this.state = {
    }
  }
  componentDidMount = () => {
  }
  setdata=(value)=>{
    let newvalue;
    try {
      newvalue=JSON.parse(value);
    }catch (e) {
      newvalue={"ops":[{"insert":value}]};
    }
    if(value===undefined){
      newvalue={"ops":[{"insert":""}]};
    }
    return newvalue
  }
  render() {
    let { description,question_title,
      question_id, index, shixun_identifier,hack_identifier
    } = this.props;
    const qNumber = `question_${index}`;

   // console.log(this.props)
    // console.log(this.state)
    // question_id: 32336
    // q_position: 4
    // question_title: "C语言测试排序3333333333"
    // question_type: 6
    // question_score: "10.0"
    return(
      <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
        <style>{`

              .mainQuestionDisplay {
                margin-bottom:15px;
              }
              
            `}</style>

        <QestionDisplayHeader {...this.props} question_title={question_title}
                              topRight={
                                <a target="_blank" href={`/problems/${hack_identifier}/edit`} className="mr30"
                                   style={{color: '#4CACFF'}}
                                >实训详情</a>
                              }
        ></QestionDisplayHeader>

        {description&&
        !this.props.exercise||this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={description} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}

        ></MarkdownToHtml>:<QuillForEditor
          style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px',padding:'0px'}}
          readOnly={true}
          value={this.setdata(description)}
          // showUploadImage={this.handleShowUploadImage}
        />}

        {/*{shixun.map((ch, index) => {*/}
        {/*  return <div>*/}
        {/*    {`第${index+1}关`}　{ch.challenge_name}　{ch.challenge_score}分*/}
        {/*  </div>*/}
        {/*})}*/}

      </div>
    )
  }
}
export default ShixunProgramming;