/*
 * @Author: yuananting
 * @Date: 2021-03-29 10:52:26
 * @LastEditors: yuananting
 * @LastEditTime: 2021-04-02 19:41:26
 * @Description: 助学工具-试卷-新建选择题目弹窗
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import { Modal } from "antd";
import CourseCategorySiderTree from "../../components/CourseCategorySiderTree";
import SelectQuestionList from "../components/SelectQuestionList";
import "./SelectQuestionModal.less";

class SelectQuestionModal extends Component {
  listRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      selectedCategoryId: null,
    };
  }

  componentDidMount() {
    this.listRef.current.state.selectQuestionKeys = this.props.getSelectedQuestion.map(
      (item) => {
        item.id = item.questionId;
        item.questionTypeEnum = item.questionType;
        return item;
      }
    );
  }

  getCategoryIdFromSider = (selectedCategoryId) => {
    if (selectedCategoryId && selectedCategoryId.length > 0) {
      this.setState({ selectedCategoryId: selectedCategoryId[0] });
    }
  };

  render() {
    return (
      <Modal
        destroyOnClose={true}
        title="选择题目"
        visible={true}
        width={1200}
        onOk={() => {
          this.props.setSelectedQuestion(
            this.listRef.current.state.selectQuestionKeys.map((item) => {
              item.questionId = item.id || item.questionId;
              item.questionType = item.questionTypeEnum || item.questionType;
              item.score = item.score || 2;
              if (
                ["MULTI_CHOICE", "GAP_FILLING", "INDEFINITE_CHOICE"].includes(
                  item.questionTypeEnum
                )
              ) {
                item.portionScore = item.portionScore || 0;
              }
              return item;
            })
          );
        }}
        onCancel={this.props.close}
        className="select-question-modal"
      >
        <div className="box content-body">
          <div
            style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
          >
            <div className="sider">
              <CourseCategorySiderTree
                fromModule="QUESTION_MODAL"
                getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
              />
            </div>
          </div>
          <div className="content">
            <SelectQuestionList
              ref={this.listRef}
              selectedCategoryId={this.state.selectedCategoryId}
            />
          </div>
        </div>
      </Modal>
    );
  }
}

export default SelectQuestionModal;
