import React, { Component } from "react";

import { Radio } from 'antd';
import TPMMDEditor from '../../../modules/tpm/challengesnew/TPMMDEditor';
import update from 'immutability-helper'
import './../questioncss/questioncom.css';
import '../questioncss/font.css';

const tagArray = [
	'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
	'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
	'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]

//题库的试卷  判断题  组件
class JudquestionEditor 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, false, false, false],
			question_title: this.props.question_title !== undefined ? this.props.question_title : "",
			question_type: this.props.question_type || 0,
			question_score: this.props.question_score || this.props.init_question_score,
			question_titles: this.props.question_titles !== undefined ? this.props.question_titles : "",
			question_titlesysl: this.props.question_titlesysl || '',
			question_titleysl: this.props.question_title || '',
			zqda: null,
			item_banksedit: [],
			mychoicess: [],
			url: '',
			paramstype: "edit",
		}
	}
	addOption = () => {

		const { question_choices, standard_answers } = this.state;
		// ////////console.log("addOption");
		// ////////console.log(question_choices);
		// ////////console.log(standard_answers);


		question_choices.push('')
		standard_answers.push(false)
		this.setState({ question_choices, standard_answers })
	}
	deleteOption = (index) => {
		let { question_choices } = this.state;

		// ////////console.log("deleteOption");
		// ////////console.log(question_choices);

		if (question_choices[index] === "") {
			// repeat code
			this.toMDMode(null)
			this.setState(
				(prevState) => ({
					question_choices: update(prevState.question_choices, { $splice: [[index, 1]] }),
					standard_answers: update(prevState.standard_answers, { $splice: [[index, 1]] })
				})
			)
		} else {
			this.props.confirm({
				content: `确认要删除这个选项吗？`,
				onOk: () => {
					this.toMDMode(null)
					this.setState(
						(prevState) => ({
							question_choices: update(prevState.question_choices, { $splice: [[index, 1]] }),
							standard_answers: update(prevState.standard_answers, { $splice: [[index, 1]] })
						})
					)
				}
			})
		}
	}
	onSave = () => {
		var editordata = [];
		const { question_title, question_score, question_titleysl, question_titlesysl, question_type, question_titles, zqda, 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_titleysl) {
			this.props.showNotification('请您输入题干');
			return editordata;
		}

		if (zqda === null) {
			this.props.showNotification('请先点击选择本选择题的正确选项');
			return editordata;
		}



		//
		// if(!question_titlesysl) {
		// 	this.props.showNotification('请您输入题目解析');
		// 	return editordata;
		// }
		/**
		 {
        "question_title":"同学朋友间常用的沟通工具是什么？",
        "question_type":1,
        "question_score":5,
        "question_choices":["a答案","b答案","c答案","d答案"],
        "standard_answers":[1]
    }*/


		editordata = [question_titleysl, zqda, question_titlesysl];
		// question_title,
		// question_type: answerArray.length > 1 ? 1 : 0,
		// question_score,
		// question_choices,
		// standard_answers: answerArray,
		// insert_id: question_id_to_insert_after || undefined
		return editordata;
	}
	onCancel = () => {
		this.props.onEditorCancel()
	}



	componentDidMount = () => {
		this.setState({
			paramstype: this.props.match.params.type,
		})
		try {
			this.props.getanswerMdRef(this);
		} catch (e) {

		}
		try {
			this.setState({
				item_banksedit: this.props.item_banksedit,
				question_title: this.props.item_banksedit.name !== undefined ? this.props.item_banksedit.name : "",
				question_titles: this.props.item_banksedit.analysis !== undefined ? this.props.item_banksedit.analysis : "",
				mychoicess: this.props.item_banksedit.choices,
				question_titleysl: this.props.item_banksedit.name || '',
				question_titlesysl: this.props.item_banksedit.analysis || '',
			})
			if (this.props.item_banksedit) {
				if (this.props.item_banksedit.choices) {
					for (var ik = 0; ik < this.props.item_banksedit.choices.length; ik++) {
						if (this.props.item_banksedit.choices[ik].choice_text === "正确") {
							if (this.props.item_banksedit.choices[ik].is_answer === true) {
								this.setState({
									zqda: "0"
								})
							}

						} else {
							if (this.props.item_banksedit.choices[ik].is_answer === true) {
								this.setState({
									zqda: "1"
								})
							}
						}
					}
				}
			}
		} catch (e) {

		}
		const params = this.props && this.props.match && this.props.match.params;
		if (JSON.stringify(params) === "{}") {
			//新增
			this.setState({
				zqda: "0"
			})
		}
	}

	componentDidUpdate(prevProps) {
		////console.log("componentDidUpdate");
		////console.log(prevProps);
		////console.log(this.props.item_banksedit);

		if (prevProps.item_banksedit !== this.props.item_banksedit) {
			this.setState({
				item_banksedit: this.props.item_banksedit,
				question_title: this.props.item_banksedit.name !== undefined ? this.props.item_banksedit.name : "",
				question_titles: this.props.item_banksedit.analysis !== undefined ? this.props.item_banksedit.analysis : "",
				mychoicess: this.props.item_banksedit.choices,
				question_titleysl: this.props.item_banksedit.name || '',
				question_titlesysl: this.props.item_banksedit.analysis || '',

			})
			if (this.props.item_banksedit) {
				if (this.props.item_banksedit.choices) {
					for (var ik = 0; ik < this.props.item_banksedit.choices.length; ik++) {
						if (this.props.item_banksedit.choices[ik].choice_text === "正确") {
							if (this.props.item_banksedit.choices[ik].is_answer === true) {
								this.setState({
									zqda: "0"
								})
							}

						} else {
							if (this.props.item_banksedit.choices[ik].is_answer === true) {
								this.setState({
									zqda: "1"
								})
							}
						}
					}
				}
			}

		}
	}
	onOptionClick = (index) => {

		let standard_answers = this.state.standard_answers.slice(0);
		// ////////console.log("onOptionClick");
		// ////////console.log(standard_answers);
		// ////////console.log(standard_answers[index]);
		// ////////console.log(!standard_answers[index]);
		for (var i = 0; i < standard_answers.length; i++) {
			if (index === i) {
				standard_answers[index] = true;
			} else {
				standard_answers[i] = false;
			}

		}
		// standard_answers[index] = !standard_answers[index];
		this.setState({ standard_answers })
	}
	onOptionContentChange = (value, index) => {
		if (index >= this.state.question_choices.length) {
			// TODO 新建，然后删除CD选项，再输入题干，会调用到这里，且index是3
			return;
		}
		let question_choices = this.state.question_choices.slice(0);
		question_choices[index] = value;
		this.setState({ question_choices })
	}
	on_question_score_change = (e) => {
		this.setState({ question_score: e })
	}
	toMDMode = (that) => {
		if (this.mdReactObject) {
			let mdReactObject = this.mdReactObject;
			this.mdReactObject = null
			mdReactObject.toShowMode()
		}
		this.mdReactObject = that;

	}
	toShowMode = () => {

	}


	handleFormLayoutChange = (e) => {
		this.setState({
			zqda: e.target.value,

		})

	}
	isNull = (str) => {
		if (str == "") return true;
		var regu = "^[ ]+$";
		var re = new RegExp(regu);
		//为空或纯空格为 true    有值为false
		console.log(re.test(str))
		return re.test(str);

	}
	onContentChange = (value) => {
		this.setState({
			question_titleysl: value
		})
	}

	handleShowUploadImages = (url) => {
		this.setState({
			url: url,
		})
		try {
			this.props.handleShowUploadImage(url)
		} catch (e) {

		}
	}
	onContentChanges = (html) => {
		this.setState({
			question_titlesysl: html
		})
	}


	render() {
		let { paramstype, question_title, question_titleysl, question_score, question_type, question_choices, standard_answers, question_titles, question_titlesysl } = this.state;
		const qNumber = `question_`;
		// TODO show模式  isNew为false isEdit为false
		const answerTagArray = standard_answers.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1);
		const params = this.props && this.props.match && this.props.match.params;
		const options = ['code-block', 'image', 'formula', 'clean']
		return (
			<div className="padding20-30  signleEditor danxuano" id={qNumber}>
				<style>{`
              .optionMdEditor {
                flex:1
              }
              .optionRow {
                margin:0px!important;
                /* margin-bottom: 20px!important; */
              }
              .signleEditor .content_editorMd_show{
                display: flex;
                margin-top:0px!important;
                border-radius:2px;
                max-width: 1056px;
                word-break:break-all;
              }
              #e_tips_mdEditor_question_undefined4{
               display: none;
              }
               .signleEditor .quill_editor_for_react_area  .ql-toolbar .ql-formats .ql-size {
              line-height: 20px;
              }
               .signleEditor .quill_editor_for_react_area  .ql-toolbar .ql-formats .ql-font {
              line-height: 20px;
               min-width: 150px;
              }
               .signleEditor .quill_editor_for_react_area  .ql-container .ql-editor p{
                  font-family: MicrosoftYaHei;
              }
            `}</style>
				<p className="mb10 clearfix">
					{/* {!question_id ? '新建' : '编辑'} */}
					<span className="xingcolor font-16 fl mr4">*</span>
					<span className="xingtigan  fl">题干：</span>
				</p>

				<TPMMDEditor
					initValue={question_titleysl}
					mdID='jud-question-title'
					onChange={this.onContentChange}
					height={155}
					placeholder="请您输入题干"
				/>
				<div className="mb10 sortinxdirection">
					<span className="xingcolor font-16 fl mr4">*</span>
					<span className="xingtigans  fl"><span className="xingtigan">答案选项：</span>点击选项可设置正确答案</span>
				</div>

				<style>
					{
						`
						.choice_textcsss {
						border-radius:2px !important;
						}
						.choice_textcss {
						margin-left: 40px !important;
						border-radius:2px !important;
						}
						`
					}
				</style>
				<div className="mb15 sortinxdirection ">
					<Radio.Group buttonStyle="solid" value={this.state.zqda} onChange={this.handleFormLayoutChange}>
						<Radio.Button value="0" className={"choice_textcsss"}>正确</Radio.Button>
						<Radio.Button value="1" className={"choice_textcss"}>错误</Radio.Button>

					</Radio.Group>

				</div>


				<div>


					<div className="mt10">
						<p className="mb10 clearfix">
							<span className="xingcolor font-16 fl mr4"></span>
							<span className="xingtigan  fl">题目解析：</span>
						</p>

						<TPMMDEditor
							initValue={question_titlesysl}
							height={166}
							mdID='jud-question-titles'
							onChange={this.onContentChanges}
							placeholder="请您输入题目解析"
						/>
					</div>
				</div>

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