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 { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;

class ShixunEditor extends Component{
  constructor(props){
    super(props);
    /**
       {                    #实训题
            "question_id": 7294,
            "question_number": 3,
            "question_title": "独立完成数据库知识",
            "question_type": 5,
            "exercise_id": 763,
            "question_score": 35,
            "shixun_id": 41,
            "shixun_name": "MySQL数据库编程开发实训（基础篇）",
            "shixun": [
                {
                    "challenge_id": 69,
                    "challenge_position": 1,
                    "challenge_name": "数据库连接与数据库实例创建",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 70,
                    "challenge_position": 2,
                    "challenge_name": "数据表的创建",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 71,
                    "challenge_position": 3,
                    "challenge_name": "数据查询操作",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 72,
                    "challenge_position": 4,
                    "challenge_name": "数据库的插入操作",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 73,
                    "challenge_position": 5,
                    "challenge_name": "数据表的删除操作",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 74,
                    "challenge_position": 6,
                    "challenge_name": "数据表的更新操作",
                    "challenge_score": 5
                },
                {
                    "challenge_id": 75,
                    "challenge_position": 7,
                    "challenge_name": "数据库的应用",
                    "challenge_score": 5
                }
            ]
        }
     */
    const { shixun } = this.props;
    const question_scores = shixun ? shixun.map(item => item.challenge_score) : []
     
    this.state = {
        
      question_title: this.props.question_title || '',
      question_type: this.props.question_type || 2,
      question_scores: question_scores || '0',
      challenges: [],
    }
  }
  
  onSave = () => {
    const {question_title, question_scores, question_type, shixun_name } = this.state;
    const { question_id_to_insert_after, question_id
            , shixun_id } = this.props
    // TODO check

    // if(!question_title) {
    //   this.props.showNotification('请先输入实训题完成要求'); return;
    // }
    for(let _i = 0; _i < question_scores.length; _i++) {
        if (!question_scores[_i] || question_scores[_i] == '0') {
            this.props.showNotification(`第${_i+1}题的分值：必须大于0`); return;
        }
    }
    

    /**
        {
    "question_title":"社会主义核心价值观是？.",
    "question_type":5,
    "question_scores":[5,5,5], 
    "shixun_id":555
}
    }*/
    const Id = this.props.match.params.Id  
    if (question_id) {
      const editUrl = `/exercise_questions/${question_id}.json`
      axios.put(editUrl, {
        question_title,
        question_type: 5,
        question_scores,
        shixun_id,
        insert_id: question_id_to_insert_after || undefined,
        shixun_name,
      })
        .then((response) => {
          if (response.data.status == 0) {
            this.props.addSuccess()
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      const url = `/exercises/${Id}/exercise_questions.json`
      
      axios.post(url, {
        question_title,
        question_type: 5,
        question_scores,
        shixun_id,
        insert_id: question_id_to_insert_after || undefined,
        shixun_name,
      })
        .then((response) => {
          if (response.data.status == 0) {
            this.props.addSuccess()
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }  
  }
  onCancel = () => {
    this.props.onEditorCancel()
  }
  componentDidMount = () => {
    const { shixun_id } = this.props;
    // shixun_id
    const Id = this.props.match.params.Id  
    const url = `/exercises/${Id}/commit_shixun.json`
    axios.get(url, {
        params: {
            shixun_id
        }
    })
        .then((response) => {
          if (response.data.challenges) {
              /**
                challenge_counts  
                shixun_name  shixun_id
                challenges  [ {challenge_name: "链表节点的初始化"} ]
               */
              const question_scores = this.state.question_scores
              let chLen = response.data.challenges.length;
              if (chLen == 0) {
                this.onCancel()
                this.props.showNotification('这个实训没有关卡，请选择其他实训')
                this.props.chooseShixunFail && this.props.chooseShixunFail()
                return
              }
              this.props.chooseShixunSuccess && this.props.chooseShixunSuccess()

              // 新建的时候初始化数组
              // question_scores.length = chLen
              let newArray = [];
              if (question_scores && question_scores.length && question_scores[0]) {
                newArray = question_scores;
              } else {
                while(chLen--) {
                  newArray.push(5)
                }
              }
              this.setState({ ...response.data, question_scores: newArray })
          }
        })
        .catch(function (error) {
          console.log(error);
        });
  }
  on_question_score_change = (e, index) => {
    console.log('e.target.value: ', e)
    const value = e
    this.setState(
        (prevState) => ({ 
          question_scores : update(prevState.question_scores
            , {[index]: {$set: value}})
        })
      )
    // this.setState({ question_score: e })
  }
  
  render() {
    let { question_title, question_score, question_type,
        shixun_name, challenges, question_scores } = this.state;
    let { question_id, index, isNew, exerciseIsPublish,} = this.props;
    
    if(!challenges || challenges.length == 0) {
      return ''
    }
    const isAdmin = this.props.isAdmin()
    const courseId=this.props.match.params.coursesId;
    const isEdit = !!question_id
    const qNumber = `question_${index}`;
    
    const blackColor = '#05101A'
    return(
        <div className="padding20-30 bor-bottom-greyE" id={qNumber}>
            <style>{`
              .optionMdEditor {
                flex: 0 0 800px
              }
              .optionRow {
                margin: 2px;
              }

              .df_left_right {
                  display: flex;
                  justify-content: space-between;
                  margin: 0 6px;
                  margin-bottom: 20px;
              }
            `}</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>
            <Input value={shixun_name} onChange={(e) => this.setState({shixun_name: e.target.value})}
                style={{ marginBottom: '10px'}}
            ></Input>
            {/* <div style={{color: blackColor}} className="font-16 mb5">{shixun_name}</div> */}
            <TPMMDEditor mdID={`question_${question_id}`} placeholder="请输入实训题完成要求" height={155} 
              initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
              noStorage={true}
            ></TPMMDEditor>
            
            
            <div>
                <div className="df_left_right">
                    <div className="color-grey-9">关卡</div>
                    <div className="color-grey-9" style={{ flex: '0 0 76px'}}>分值</div>
                </div>
                { challenges.map((challenge, index) => {
                    return <div className="df_left_right">
                        <div style={{color: blackColor}} className="lineh-30">
                            {index+1}.{challenge.challenge_name}
                        </div>
              
                        <div>
                            <InputNumber step={0.1} precision={1} min={0.1} max={100} 
                                    style={{width: 100}} value={question_scores[index]}
                                    placeholder="请填写分数" disabled={exerciseIsPublish}
                                    onChange={(e) => this.on_question_score_change(e, index)}></InputNumber> 分
                        </div>
                    </div>
                })}
            </div>

            <div style={{ height: '40px', marginTop: '10px' }}>
              <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 (ShixunEditor);