import React from "react";
import "../SelectSubjects.css";
import {
  Button,
  Form,
  Space,
  message,
  DatePicker,
  InputNumber,
  Radio,
  Typography,
} from "antd";
import { FormOutlined } from "@ant-design/icons";
import { authenticationService } from "../../../_services";
import TextArea from "antd/lib/input/TextArea";
import { selectorService } from "../../../services/selectorService";
import moment from "moment";
import { Trans } from "react-i18next";

let subject = [];
class ManageExam extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentUser: authenticationService.currentUserValue,
      examName: props.selectorState.name,
      update: false,
      examId: props.selectorState.examId,
      instruction: "",
      start_date: "",
      end_date: "",
      attempts_allowed: 1,
      exam_duration: 0,
      complexity: "",
    };
    this.onTextAreaInstruction = this.onTextAreaInstruction.bind(this);
    this.onOkExamAvailabityDate = this.onOkExamAvailabityDate.bind(this);
    this.onOkExamEndDate = this.onOkExamEndDate.bind(this);
    this.changeExamDuration = this.changeExamDuration.bind(this);
    this.changeAttemptAllowed = this.changeAttemptAllowed.bind(this);
    this.handleSubmitExam = this.handleSubmitExam.bind(this);
  }

  handleSubmitExam = () => {
    if (
      !this.props.selectorState.id ||
      !this.state.complexity ||
      !this.state.start_date
    ) {
      message.warning("All fields are mandatory");
    } else {
      let json = {
        id: this.props.selectorState.id,
        complexity: this.state.complexity,
        start_date: this.state.start_date,
      };
      message.loading({ content: "Publishing Practice ..." });
      selectorService
        .publishPractice(this.props.selectorState.id, json)
        .then((data) => {
          message.success({ content: "Practice Published!", duration: 3 });
          // console.log(data);
          this.props.parentCallback();
        }).catch(err => {
          console.log(err);
          message.error("Operation failed. Could not publish the practice. Try again.")
        });
    }
  };

  onTextAreaInstruction = (event) => {
    this.setState({
      instruction: event.target.value,
    });
  };

  changeAttemptAllowed = (value) => {
    this.setState({
      attempts_allowed: value,
    });
  };

  onOkExamAvailabityDate = (date, dateString) => {
    if(date) {
      let stDate = date.format("YYYY-MM-DDTHH:mm:ss.sss");
      this.setState({
        start_date: stDate,
      });
    }
    if(!date) {
      this.setState(prev => ({...prev, start_date: undefined}));
    }
  };

  onOkExamEndDate = (date, dateString) => {
    let stDate = date.format("YYYY-MM-DDTHH:mm:ss.sss");
    this.setState({
      end_date: stDate,
    });
  };

  changeExamDuration = (value) => {
    this.setState({
      exam_duration: value,
    });
  };

  render() {
    return (
      <div className="ManageExam">
        <div className="QuestionOtherContent">
          <div className="ManageExamSpace mt-1-0">

            <Typography.Text strong style={{color: '#3b3cea'}}><Trans i18nKey={'practice.step3.pracAvail'}>Practice Availbility</Trans></Typography.Text>

            <DatePicker
              style={{
                width: 300
              }}
              selected={
                this.state.start_date == ""
                  ? Date()
                  : new Date(this.state.start_date)
              }
              showTime
              onChange={this.onOkExamAvailabityDate}
            />

            <Typography.Text strong style={{color: '#3b3cea'}}><Trans i18nKey={'complex-header'}>Complexity</Trans></Typography.Text>
            <Radio.Group
              buttonStyle="solid"
              value={this.state.complexity}
              onChange={(e) => {
                this.setState({ complexity: e.target.value });
              }}
            >
              <Radio.Button value="1"><Trans i18nKey={"practice.step3.easyComp"}>Easy</Trans></Radio.Button>
              <Radio.Button value="2"><Trans i18nKey={"practice.step3.medComp"}>Medium</Trans></Radio.Button>
              <Radio.Button value="3"><Trans i18nKey={"practice.step3.difComp"}>Difficult</Trans></Radio.Button>
            </Radio.Group>

          </div>
          <div></div>
        </div>
      </div>
    );
  }
}

export default ManageExam;
