import React,{ Component } from "react";

import {
  Form, Input, InputNumber, Switch, Radio,
  Slider, Button, Upload, Icon, Rate, Checkbox, message,
  Row, Col, Select, Modal, Tooltip
} from 'antd';
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
import axios from 'axios'
import update from 'immutability-helper'
import { qNameArray } from './common'

import {getUrl, ActionBtn, DMDEditor} from 'educoder';

const RadioGroup = Radio.Group;

const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;

class SingleEditor extends Component{
  constructor(props){
    super(props);
    /**
      choice_id: 32076
      choice_position: 1
      choice_text: "1"
      standard_boolean: true
     */
    const {question_choices} = this.props;
    let _standard_answers = undefined;
    let _question_choices = undefined;
    if (question_choices) {
      _standard_answers = []
      _question_choices = []

      question_choices.forEach((item, index) => {
        _standard_answers.push(item.standard_boolean)
        _question_choices.push(item.choice_text)
      })
    }
    this.state = {
      question_choices: _question_choices || ['对', '错'],
      standard_answers: _standard_answers || [false, true],
      question_title: this.props.question_title || '',
      question_type: this.props.question_type || 2,
      question_score: this.props.question_score || this.props.init_question_score,
    }
  }
  
  onSave = () => {
    const {question_title, question_score, question_type, question_choices, standard_answers } = this.state;
    const { question_id_to_insert_after, question_id } = this.props
    // TODO check
    const answerArray = standard_answers.map((item, index) => { return item == true ? index+1 : -1 }).filter(item => item != -1);
    if(!question_title) {
      this.refs['titleEditor'].showError()
      this.props.showNotification('题目：不能为空'); return;

    }
    const intScore = parseFloat(question_score)
    if (intScore == 0) {
      this.props.showNotification('分值：必须大于0'); return;
    } else if(!question_score || intScore == NaN) {
      this.props.showNotification('分值：不能为空'); return;
    } 
    if(!answerArray || answerArray.length == 0) {
      this.props.showNotification('必须设置标准答案'); return;
    }
    if(!question_title) {
      this.refs['titleEditor'].showError()
      this.props.showNotification('题目：不能为空'); return;

    }

    /**
        {
    "question_title":"现在在下雨",
    "question_type":2,
    "question_score":5,
    "question_choices":["正确","错误"],
    "standard_answers":[1]    
}
    }*/
    const Id = this.props.match.params.Id  
    if (question_id) {
      const editUrl = this.props.getEditQuestionUrl(question_id);
      axios.put(editUrl, {
        question_title,
        question_type: 2,
        question_score,
        question_choices,
        standard_answers: answerArray,
        insert_id: question_id_to_insert_after || undefined
      }).then((response) => {
          if (response.data.status == 0) {
            this.props.addSuccess()
          }else if(response.data.status == 3){
            // 已发布试卷编辑保存
            this.props.changeScore(question_id,answerArray);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      const url = this.props.getAddQuestionUrl();
      
      axios.post(url, {
        exercise_bank_id: Id,
        question_title,
        question_type: 2,
        question_score,
        question_choices,
        standard_answers: answerArray,
        insert_id: question_id_to_insert_after || undefined
      })
        .then((response) => {
          if (response.data.status == 0) {
            this.props.addSuccess()
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }  
  }
  onCancel = () => {
    this.props.onEditorCancel()
  }
  componentDidMount = () => {
    
  }
  onOptionClick = (e) => {
    const value = e.target.value;
    if (value) {
      this.setState({ standard_answers: [true, false] })
    } else {
      this.setState({ standard_answers: [false, true] })
    }

    // const { exerciseIsPublish } = this.props;
    // if (exerciseIsPublish) return;
    // let standard_answers = this.state.standard_answers.slice(0)
    // if (standard_answers[index]) return;
    // standard_answers[index] = !standard_answers[index]
    // if (index == 0) {
    //     standard_answers[1] = false
    // } else {
    //     standard_answers[0] = false
    // }
    // this.setState({ standard_answers })
  }
  on_question_score_change = (e) => {
    this.setState({ question_score: e })
  }
  
  render() {
    let { question_title, question_score, question_type, question_choices, standard_answers,  } = this.state;
    let { question_id, index, exerciseIsPublish,
    // question_title, 
    // question_type, 
    // question_score,
        isNew } = this.props;
    
    // const { getFieldDecorator } = this.props.form;
    
    const isAdmin = this.props.isAdmin()
    const courseId=this.props.match.params.coursesId;
    const isEdit = !!this.props.question_id
    const qNumber = `question_${index}`;
    
    // const answerTagArray = standard_answers.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1);
    return(
        <div className="padding20-30 bor-bottom-greyE" id={qNumber}>
            <style>{`
              .optionMdEditor {
                flex: 0 0 800px
              }
              .optionRow {
                margin: 2px;
              }
            `}</style>
            <p className="mb10 clearfix">
            {/* {!question_id ? '新建' : '编辑'} */}
              <span className="color-blue font-16 mr20 fl">{qNameArray[question_type]}</span>
              <span className="color-grey-9 font-12 fl">（客观题，由系统自动评分，请设置标准答案）</span>
            </p>

            <TPMMDEditor mdID={`question_${question_id}`} placeholder="请您输入题目" height={155} 
              initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
              ref="titleEditor"
            ></TPMMDEditor>
            
            <div>
            <RadioGroup onChange={this.onOptionClick} value={standard_answers[0]}>
              {/* disabled={exerciseIsPublish} */}
              <Radio value={true} >正确</Radio>
              <Radio value={false} >错误</Radio>
            </RadioGroup>
            {/* not work */}
            {/* <Radio value={standard_answers[0]} onClick={() => this.onOptionClick(0)} disabled={exerciseIsPublish}>对</Radio>
            <Radio value={standard_answers[1]} onClick={() => this.onOptionClick(1)} disabled={exerciseIsPublish}>错</Radio> */}
            

              {/* <span class={`judge-item option-item  mr10 color-grey select-choice ${standard_answers[0] ? 
                  'check-option-bg' : ''} `}
                  name="option_span" onClick={() => this.onOptionClick(0)}>正确
              </span>
              <span class={`judge-item option-item  mr10 color-grey select-choice ${standard_answers[1] ? 
                  'check-option-bg' : ''} `}
                  name="option_span" onClick={() => this.onOptionClick(1)}>错误
              </span> */}
              {!exerciseIsPublish && <span style={{color: '#FF6800'}}>温馨提示：点击选项，可以直接设置标准答案</span>}

            </div>

            <div>
              分值：
              <InputNumber step={0.1} precision={1} min={0} max={100} style={{width: 100}} value={question_score} onChange={this.on_question_score_change}
                  disabled={exerciseIsPublish}
              ></InputNumber> 分
              
              <span className="fr">
                <ActionBtn style="greyBack" className="middle mr20" onClick={this.onCancel}
                >取消</ActionBtn>
                <ActionBtn style="blue" className="middle" onClick={this.onSave}>保存</ActionBtn>
              </span>
              
            </div>
            
        </div>
      )
    }
}
// RouteHOC()
export default (SingleEditor);