import React from "react";
import "../AddQuestions.css";
import { Layout, Button, message } from "antd";
import "antd/dist/antd.css";
import Selector from "../Selector";
import { authenticationService } from "../../../_services";
import QuestionTable from "../QuestionTable";
import equal from "fast-deep-equal";
import { selectorService } from "../../../services/selectorService";
import ReviewQuestions from "./ReviewQuestionPractice";
import { InfoCircleFilled } from "@ant-design/icons";
import { Trans } from "react-i18next";

class AddQuestions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: authenticationService.currentUserValue,
      top: "topLeft",
      bottom: "bottomRight",
      classes: "1",
      subject: "",
      category: "",
      questionType: "",
      complexity: "",
      classes: props.addQuestion.classes,
      module_id: props.addQuestion.subjectId,
      section_id: props.addQuestion.module_id,
      module: props.addQuestion.module,
      subjectId: props.addQuestion.subjectId,
      visible: props.addQuestion.visible,
      attachedQuestions: [],
      examId: props.addQuestion.examId,
      reviewVisible: false,
    };
    this.attachQuestion = this.attachQuestion.bind(this);
    this.reviewQuestions = this.reviewQuestions.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  attachQuestion() {
    const data = {};
    data.idList = this.state.attachedQuestions;
    message.loading({ content: "Attaching Question..." });
    //   let examSectionId=this.props.addQuestion.sections.filter(x=>x.label===this.props.addQuestion.sectionName)[0].id;
    selectorService
      .attachQuestionsToPractice(this.state.examId, data)
      .then((data1) => {
        // console.log(data1);
        if(+data1.status.code < 1) {
          throw "Something went wrong, failed to attach question(s)."
        }
        message.success({
          content:
            "Question Attached to : " + this.props.addQuestion.sectionName,
          duration: 3,
        });
      }).catch(err => {
        if(err === "Something went wrong, failed to attach question(s).") {
          message.error({
            content: err
          });
        } else {
          message.error({
            content: "Operation failed!!!"
          });
        }
        console.log(err);
      });
  }
  handleCancel = (e) => {
    this.props.closeComplete(e);
  };

  handleSubmit = (e) => {
    return this.ReviewQuestionRef.current.submitReviewQuestion();
    
    // this.handleCancel();
  };

  reviewQuestions = () => {
    this.setState({
      reviewVisible: true,
    });
  };

  addQuestions = (questions) => {
    //  console.log("Parent recieved Selector Data: "+ childData);
    // console.log(questions);
    this.state.attachedQuestions = questions;
  };

  callbackFunction = (childData) => {
    //  console.log("Parent recieved Selector Data: "+ childData);
    this.setState({
      classes: childData.classes,
      module_id: childData.module_id,
      subjectId: this.props.addQuestion.subjectId,
      module: childData.module,
      questionType: childData.questionType,
      complexity: childData.complexity,
      visible: true,
    });
  };

  componentDidUpdate(prevProps) {
    if (!equal(this.props.addQuestion, prevProps.addQuestion)) {
      // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
      this.setState({
        classes: this.props.addQuestion.classes,
        module_id: this.props.addQuestion.module_id,
        module: this.props.addQuestion.module,
        subjectId: this.props.addQuestion.subjectId,
      });
    }
  }

  componentDidMount() {
    this.setState({
      classes: this.props.addQuestion.classes,
      module_id: this.props.addQuestion.module_id,
      module: this.props.addQuestion.module,
      subjectId: this.props.addQuestion.subjectId,
    });
    this.ReviewQuestionRef = React.createRef();
  }
  render() {
    // console.log(this.state, this.props);
    return (
      <div>
        {this.props.step === 0 && <Layout>
          <Layout>
            <Layout className="SubSection1">
              <div className="ExamSelector">
                <Selector
                  page="addQuestions"
                  selectorState={this.props.addQuestion}
                  parentCallback={this.callbackFunction}
                />
                <div className="selector">
                    <Button
                      className="selectorLeftButton"
                      type="primary"
                      onClick={this.attachQuestion}
                    >
                      <Trans i18nKey={"attach-btn"}>Attach</Trans>
                    </Button>
                    <div className="subheader-info">
                      <InfoCircleFilled style={{color: "darkorange", fontSize: 16}} /> <span>
                        <Trans i18nKey={"note-in-attach-modal"}>Select questions and 'ATTACH' them before moving to next page.</Trans>
                      </span>
                    </div>
                  </div>
              </div>
              <div style={{margin: '20px 20px 0'}}>
                <div>
                  <QuestionTable
                    selectorState={this.state}
                    parentCallback={this.addQuestions}
                  />
                </div>
              </div>
            </Layout>
          </Layout>
        </Layout>}
        {this.state.reviewVisible && this.props.step === 1 ? (
          <ReviewQuestions
            ref={this.ReviewQuestionRef}
            sectionState={this.props.addQuestion}
            handleCancel={this.handleCancel}
          />
        ) : null}
      </div>
    );
  }
}

export default AddQuestions;
