import React from 'react';
import './SelectSubjects.css';
import { Button, Form, Space, message, DatePicker, InputNumber } 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
    };
    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 = () => {

    const startDate = new Date(this.state.start_date);
    const endDate = new Date(this.state.end_date);

    
    if(!this.state.instruction) {
      message.error("Please set some Instructions for the Exam");
      return;
    }

    if(endDate < startDate) {
      message.error("Please set the Exam End Date to a date after Exam Start Date");
      return;
    }

    if(this.state.attempts_allowed < 1) {
      message.error("Please set the attempt allowed to be greater than 0");
      return;
    }

    if (this.state.exam_duration < 1) {
      message.error("Please set the exam duration to be greater than or equal to 1");
      return;
    }
    
    message.loading({ content: 'Publishing Exam ...' });

    let json = {
      id: this.props.selectorState.id,
      instruction: this.state.instruction,
      start_date: this.state.start_date,
      end_date: this.state.end_date,
      attempts_allowed: this.state.attempts_allowed,
      exam_duration: (this.state.exam_duration*60*60),
    }
    selectorService.publishExam(this.props.selectorState.id, json).then(data => {
      if(+data.status.code < 0) {
        throw data.status.message[0]
      }
      message.success({ content: 'Exam Published!', duration: 3 }); 
      this.props.parentCallback();   
    }).catch(err => {
      message.error("Failed to publish exam, please try again.");
      console.log(err);
    });
  }

  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) => {
    if(date) {
      let stDate = date.format("YYYY-MM-DDTHH:mm:ss.sss");
      this.setState({
        end_date: stDate,
      });
    }
    if(!date) {
      this.setState(prev => ({...prev, end_date: undefined}));
    }
  }

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



  render() {
    return (
      <div className='ManageExam'>
        <div className="QuestionOtherContent">
          <div className="ManageExamSpace">
            <span><Trans i18nKey={"instructions"}>Instructions</Trans></span>
            <TextArea className='TextArea' autoSize={{ minRows: 3, maxRows: 6 }} placeholder="Instruction" value={this.state.instruction} onChange={e => { this.onTextAreaInstruction(e) }} />
            
            <span><Trans i18nKey={"exam-avail"}>Exam Availbility</Trans></span>

            <DatePicker showTime={{ format: 'HH:mm' }}
              // format="YYYY-MM-DDTHH:mm:ss.sss" 
              onChange={this.onOkExamAvailabityDate} />
            <span><Trans i18nKey={"exam-end-date"}>Exam End Date</Trans></span>

            <DatePicker showTime={{ format: 'HH:mm' }}
              // format="YYYY-MM-DDTHH:mm:ss.sss" 
              onChange={this.onOkExamEndDate} />
            <span><Trans i18nKey={"exam-duration"}>Exam Duration (in hours)</Trans></span>
            <InputNumber defaultValue={this.state.exam_duration} onChange={this.changeExamDuration} min={0} step={1} />
            <span><Trans i18nKey={"attempts"}>Attempts Allowed</Trans></span>
            <InputNumber defaultValue={this.state.attempts_allowed} onChange={this.changeAttemptAllowed} min={1} step={1} />

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

export default ManageExam;
