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



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


    this.state = {
    }
  }
  componentDidMount = () => {
  }
  render() {
    let {standard_answer,
        question_id, index
     } = this.props;


    const qNumber = `question_${index}`;
    // TODO show模式  isNew为false isEdit为false

    return(
        <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
            <style>{`
              .optionMdEditor {
                flex: 0 0 800px
              }
              .optionRow {
                margin: 2px;
              }
              .actionBtns {
                  height: 28px
              }
              
            `}</style>

            <QestionDisplayHeader {...this.props}></QestionDisplayHeader>

            { standard_answer[0] &&
            <React.Fragment>
              <div style={{color: '#05101A'}} className="font-16 mb5 font-bd">参考答案：</div>

              {!this.props.exercise||this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={standard_answer[0]} selector={'answer_' + qNumber}
                  className=""
              ></MarkdownToHtml>:<QuillForEditor
                readOnly={true}
                style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
                value={standard_answer[0]?JSON.parse(standard_answer[0]):""}
                // showUploadImage={this.handleShowUploadImage}
                />}
            </React.Fragment>
            }

        </div>
      )
    }
}

export default (MainDisplay);