import React, { Component } from "react";
import { Modal, Checkbox, Input, Spin, Icon, notification } from "antd";
import axios from 'axios';
import Modals from '../../modals/Modals';
const CheckboxGroup = Checkbox.Group;

class Addcourses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      invite_code: undefined,
      Addcoursestype: false,
      Checkboxteacherchecked: false,
      Checkboxteachingchecked: false,
      Checkboxstudentchecked: false,
      Checkboxteachertype: false,
      Checkboxteachingtype: false,
      professor: null,
      assistant_professor: null,
      student: null,
      course_id: undefined,
      loadtype: false,
      modalsType: false,
      modalsTopval: undefined,
      modalSave: undefined,
      isSpin: false
    }
  }

  componentDidMount() {
    axios.interceptors.response.use((response) => {
      if (response != undefined)
        if (response && response.data.status === 409) {
          this.setState({
            Addcoursestypes: true
          })
        }
      return response;
    }, (error) => {

    });


    let { Addcoursestype } = this.props;
    this.setState({
      Addcoursestype: Addcoursestype
    })

  }
  componentDidUpdate = (prevProps) => {
    if (prevProps.occupation !== this.props.occupation) {
      this.setState({
        Addcoursestype: false,
        Addcoursestypes: false,
      })
    }
  }
  openNotification = (messge) => {
    notification.open({
      message: "提示",
      description:
        messge,
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  };

  inputjoinclassvalue = (e) => {
    if (e.target.value.length >= 7) {
      this.openNotification("请输入5位课堂邀请码或6位分班邀请码!");
      return
    }
    this.setState({
      invite_code: e.target.value
    })

  }

  Checkboxteaching = (e) => {

    if (e.target.checked === true) {
      this.setState({
        assistant_professor: 1,
        professor: null,
        Checkboxteachingchecked: e.target.checked,
        Checkboxteachertype: true
      })
    } else {
      this.setState({
        professor: null,
        Checkboxteachingchecked: e.target.checked,
        Checkboxteachertype: false
      })
    }

  }



  Checkboxteacher = (e) => {

    if (e.target.checked === true) {
      this.setState({
        professor: 1,
        assistant_professor: null,
        Checkboxteacherchecked: e.target.checked,
        Checkboxteachingtype: true
      })
    } else {
      this.setState({
        professor: null,
        assistant_professor: null,
        Checkboxteacherchecked: e.target.checked,
        Checkboxteachingtype: false
      })
    }

  }

  Checkboxstudent = (e) => {

    if (e.target.checked === true) {
      this.setState({
        student: 1,
        Checkboxstudentchecked: e.target.checked
      })
    } else {
      this.setState({
        student: null,
        Checkboxstudentchecked: e.target.checked
      })
    }

  }



  hidetojoinclass = () => {
    let { Addcoursestype } = this.props;
    this.setState({
      invite_code: undefined,
      Addcoursestype: false,
      Checkboxteacherchecked: false,
      Checkboxteachingchecked: false,
      Checkboxstudentchecked: false,
      Checkboxteachertype: false,
      Checkboxteachingtype: false,
      professor: null,
      assistant_professor: null,
      student: null,
      Addcoursestypes: false
    })

    if (Addcoursestype === true) {
      this.props.hideAddcoursestype();
    } else {
      window.location.href = "/";
    }

  }

  submitasyn = (course_id) => {
    let { professor, Addcoursestype } = this.state;

    if (professor === 1) {
      this.setState({
        loadtype: true,
        modalsType: true,
        modalsTopval: "申请已提交，请等待审核",
        modalSave: (course_id) => this.submitasyns(course_id),
        Addcoursestype: false
      })
      if (Addcoursestype === true) {
        this.props.hideAddcoursestype();
      }
    } else {
      this.setState({
        Addcoursestype: false
      })
      if (Addcoursestype === true) {
        this.props.hideAddcoursestype();
      }
      window.location.href = "/classrooms/" + course_id + "/students";
    }

  }
  submitasyns = (course_id) => {
    window.location.href = "/classrooms/" + course_id + "/students";
  }

  submittojoinclass = () => {
    let { Addcoursestype } = this.state;
    this.setState({
      isSpin: true
    })
    let { invite_code, professor, assistant_professor, student } = this.state;
    if (invite_code === undefined || invite_code === "") {
      this.setState({
        invite_codetype: true,
        invite_codevalue: "邀请码不能为空",
        isSpin: false
      })
      return
    } else {
      this.setState({
        invite_codetype: false,
        invite_codevalue: " ",
        isSpin: false
      })
    }

    let url = "/courses/apply_to_join_course.json"
    axios.post(url, {
      invite_code: invite_code,
      professor: professor,
      assistant_professor: assistant_professor,
      student: student
    }
    ).then((response) => {
      if (response === undefined) {
        this.setState({
          isSpin: false
        });
        return
      }
      if (response.data.status === -2) {
        this.setState({
          Addcoursestype: false,
          isSpin: false
        });
        if (response.data.message === "该课堂要求成员完成实名认证") {
          this.props.HideAddcoursestypess(1);
          return;
        }
        if (response.data.message === "该课堂要求成员完成职业认证") {
          this.props.HideAddcoursestypess(2);
          return;
        }
        if (response.data.message === "该课堂要求成员完成实名和职业认证") {
          this.props.HideAddcoursestypess(3);
          return;
        }
        notification.open({
          message: "提示",
          description: response.data.message
        });
        return;
      }
      if (response.data.status === 0) {
        if (response.data.course_id == 2704) {
          this.props.history.push('/classrooms/2704/boards/8367/messages/42072')
          return;
        }
        notification.open({
          message: "提示",
          description: response.data.message
        });
        if (response.data.course_id != undefined) {
          this.submitasyn(response.data.course_id)
        }
        if (Addcoursestype === true) {
          this.props.hideAddcoursestype();
        }
      } else {

        response.data.message && notification.open({
          message: "提示",
          description: response.data.message
        });
        this.setState({
          Addcoursestype: false
        })
        if (Addcoursestype === true) {
          this.props.hideAddcoursestype();
        }
      }
      this.setState({
        Addcoursestype: false,
        isSpin: false
      });
    }).catch((error) => {
      console.log(error);
      this.setState({
        Addcoursestype: false,
        isSpin: false
      });
    })

  }

  render() {
    let { invite_code,
      Addcoursestype,
      Checkboxteacherchecked,
      Checkboxteachertype,
      Checkboxteachingchecked,
      Checkboxteachingtype,
      Checkboxstudentchecked,
      loadtype,
      modalsType,
      modalsTopval,
      modalSave,
      Addcoursestypes
    } = this.state;
    const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
    return (
      <div>
        <Modals
          loadtype={loadtype}
          modalsType={modalsType}
          modalsTopval={modalsTopval}
          modalSave={modalSave}
        />

        <Modal
          keyboard={false}
          className={"HomeworkModal"}
          title="加入课堂"
          visible={Addcoursestype === undefined || Addcoursestype === false ? Addcoursestypes : Addcoursestype}
          closable={false}
          footer={null}
          destroyOnClose={true}
        >
          <Spin indicator={antIcon} spinning={this.state.isSpin}>
            <div className="task_popup_con  ml30">
              <div className="mr15">
                <ul>
                  <li className="clearfix mb10">
                    <label className="panel-form-label fl">课堂邀请码：</label>
                    <Input type="text" className="input-60-40 fl mt5" name="invite_code"
                      placeholder="请输入5位课堂邀请码或6位分班邀请码"
                      style={{ width: '275px' }}
                      value={invite_code} onInput={this.inputjoinclassvalue} />
                  </li>

                  <p id="none_invite_code_notice"
                    className="color-orange none f12"
                  >请输入5位课堂邀请码或6位分班邀请码</p>

                  <li className="clearfix ">

                    <label className="panel-form-label fl">身份：</label>
                    <span className="fl mr20 mt10">
                      <Checkbox onChange={this.Checkboxteacher} checked={Checkboxteacherchecked} disabled={Checkboxteachertype}>教师</Checkbox>
                    </span>

                    <span className="fl mr20 mt10">
                      <Checkbox onChange={this.Checkboxteaching} checked={Checkboxteachingchecked} disabled={Checkboxteachingtype} >助教</Checkbox>
                    </span>

                    <span className="fl mr20 mt10">
                      <Checkbox onChange={this.Checkboxstudent} checked={Checkboxstudentchecked}>学生/参赛者</Checkbox>
                    </span>

                  </li>

                  {
                    this.state.invite_codetype === true ?
                      <span className={"color-red"}>
                        {this.state.invite_codevalue}
                      </span> : ""
                  }
                  <p id="none_checked_notice" className="color-orange none f12"
                  >请至少选择一个身份</p>

                  <li className="clearfix mt10 edu-txt-center">
                    <a className="task-btn mr10 color-white"
                      onClick={() => this.hidetojoinclass()}>取消</a>
                    <a
                      className="task-btn task-btn-orange ml20"
                      onClick={() => this.submittojoinclass()}>确定</a>
                  </li>

                </ul>
              </div>
            </div>
          </Spin>
        </Modal>
      </div>
    )
  }
}
export default Addcourses;

