import React, {Component} from 'react';
import {Link} from "react-router-dom";
import axios from 'axios';
import {getImageUrl, trigger, on, off} from 'educoder';
import { Tooltip, message,Popover} from 'antd';
import CoursesListType from '../coursesPublic/CoursesListType';
import AccountProfile from"../../user/AccountProfile";
import Addcourses from '../coursesPublic/Addcourses';
import '../css/Courses.css';
import Modals from "../../modals/Modals";
import Guide from './CoursesGuide';
import AddStudentModal from '../members/modal/AddStudentModal'
import AddTeacherModal from '../members/modal/AddTeacherModal'

// 点击按钮复制功能
// function jsCopy(){
//   var e = document.getElementById("copy_invite_code");
//   e.select();
//   document.execCommand("Copy");
//   codesuccess()
// }

// 点击按钮复制功能
function jsCopy() {
    var e = document.getElementById("copy_invite_code");
    e.select();
    document.execCommand("Copy");
    codesuccess()
}

function codesuccess() {
    message.success('复制成功');
};

class CoursesBanner extends Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false,
            Addcoursestypes: false,
            modalsType: false,
            modalsTopval: "",
            loadtype: false,
            metype: 0,
            modalsBottomval: "",
            antIcon:false,
            coursedata:undefined,
            is_guide:false
        }
    }
    componentDidMount() {

			this.onloadupdatabanner()
      on('updatabanner', this.updatabanner)
    }
    componentWillUnmount() {
      off('updatabanner', this.updatabanner)
    }
    

	onloadupdatabanner=()=>{
		this.updatabanner()
	}
  updatabanner=()=>{
      let courseId = this.props.match.params.coursesId;
      let url = "/courses/" + courseId + "/top_banner.json"
      axios.get(url).then((result) => {
      	if( result!=undefined){
					let data = result.data;
            this.setState({
              coursedata: data,

            })
				}else{
					this.onloadupdatabanner()
				}
      })
  }
    showeditmenu = () => {
        this.setState({
            show: true,
        })
    }

    hideeditmenu = () => {
        this.setState({
            show: false
        })
    }

    tojoinclass = (val) => {
			if(this.props.current_user&&this.props.current_user.profile_completed===false){
				this.setState({
					AccountProfiletype:true
				})
				return
			}

        if (val === 1) {
            this.setState({
                Addcoursestypes: true,
            })
        } else {
            this.setState({
                Addcoursestypes: false,
            })
        }


    }
    showActionPoll=(i,s,ss)=>{
        this.setState({
            modalsType: true,
            modalsTopval: s,
            loadtype: false,
            metype: i,
            modalsBottomval: ss,
        })
    }
    ActionPoll = (i) => {
        let {coursedata}=this.state;
        var s = "";
        var ss = "";
        if (i === 1) {
            s = "课堂删除后数据将无法恢复，是否确定删除？";
            this.showActionPoll(i,s)
        }
        if (i === 2) {
            s = "您确定要设置为私有?";
            this.showActionPoll(i,s)
        }
        if (i === 3) {
            s = "设为公开后，非课堂成员也可以访问查看";
					  ss =  "是否确认设为公开？";
            this.showActionPoll(i,s,ss)
        }

			if(i===4){
            if(coursedata.code_halt === true){
                var url = `/courses/${this.props.match.params.coursesId}/set_invite_code_halt.json`
                axios.post(url, {}).then((result) => {
                    try {
                        if (result.data.status === 0){
                            this.updatabanner()
                        }
                    } catch (e) {

                    }

                })
            }else{
                s = "邀请码停用后，用户不能主动加入该课堂了";
                ss =  "您是否确认停用?";
                this.showActionPoll(i,s,ss)
            }
            }
        if (i ===5) {
            s = "复制将在后台执行,作业、资源、试卷都将复制到新课堂平台";
            ss = "将为你创建一个新的同名课堂，请问是否继续？";
            this.showActionPoll(i,s,ss)
        }

    }
    //取消
    modalCancel = () => {
        this.setState({
            modalsType: false,
            modalsTopval: "",
            modalsBottomval:"",
            loadtype: false,
            antIcon:false
        })

    }
    // 确定
    ModalAction = () => {
        let {coursedata}=this.state;

        var push = this.props.history;
        let id = this.props.match.params.coursesId;
        //删除
        if (this.state.metype === 1) {
            console.log("删除");
           this.modalCancel();
            var url = `/courses/${id}.json`
            axios
                .delete(url, {})
                .then(function (response) {
                    console.log(response.data.status)
                    if (response.data.status === 0) {
                        message.success("删除成功", 1)
                        push.push(`/courses`)

                    }
                })
        }
        //设为私有的
        if (this.state.metype === 2) {
            this.modalCancel();
            var state = this.state;
            var url = `/courses/${id}/set_public_or_private.json`
            axios.post(url, {}).then((result) => {
                    if (result.data.status === 0) {
                        message.success("设为私有的成功", 1);
                        state.coursedata.is_public = false;
                        this.setState({
                            coursedata: state.coursedata,
                        })
                    }
            })
        }
        //设为公有的
        if (this.state.metype === 3) {
            this.modalCancel();
            var state = this.state;
            var url = `/courses/${id}/set_public_or_private.json`
            axios.post(url, {}).then((result) => {
                    if (result.data.status === 0) {
                        message.success("设为公有的成功", 1);
                        state.coursedata.is_public = true;
                        this.setState({
                            coursedata: state.coursedata,
                        })
                    }
            })
        }
        //停用邀请码
        if (this.state.metype === 4) {
            this.modalCancel();
            var url = `/courses/${id}/set_invite_code_halt.json`
            axios.post(url, {}).then((result) => {
                try {
                    if (result.data.status === 0) {
                        message.success(coursedata.code_halt === true?"启用用邀请码成功":"停用邀请码成功", 1);
                        this.updatabanner()
                    }
                } catch (e) {

                }

            })
        }
        if (this.state.metype ===5) {
            this.setState({
                antIcon: true,
            })
            var url = `/courses/${id}/duplicate_course.json`
            axios.post(url).then((response) => {
                // window.location.href = "/courses/" + response.data.new_course_id;
              window.location.href = "/courses/" + response.data.new_course_id+"/students";
            })
        }

        if(this.state.metype===6){
          this.setState({
            antIcon: true,
          })
          var url =`/courses/${id}/exit_course.json`;
          axios.post(url).then((response) => {
            if(response.data.status===0){
              window.location.href = "/users/" + this.props.current_user.login;
            }
          })
        }


    }
    addTeacher = (isTeacher) => {
        this.setState({ isTeacher }, () => {
            this.refs.addTeacherModal.setVisible(true)    
        }) 
        
    }
    addStudent = () => {
        this.refs.addStudentModal.setVisible(true)    
    }
    addTeacherSuccess = (params) => {
        trigger('addTeacherSuccess', JSON.stringify(params))
        this.updatabanner()
    }
    addStudentSuccess = (params) => {
        trigger('addStudentSuccess', JSON.stringify(params))        
        this.updatabanner()
    }
    //退出课堂按钮
    exitclass=()=>{
      this.setState({
        modalsType: true,
        modalsTopval: "退出后您将不再是本课题的成员,作品将全部被删除，",
        modalsBottomval:"确定要退出该课堂吗？",
        metype:6
      })
    }
  //切换身份
  switchidentity=(sum)=>{
    let newurl=this.props.match.url;
    let id = this.props.match.params.coursesId;
    if(sum===1){
     let url =`/courses/${id}/switch_to_student.json`;
      axios.post(url).then((response) => {
        if(response.data.status===0){
          // window.location.href = "/users/" + this.props.current_user.login;
          // this.props.history.replace(newurl);
          window.location.href=newurl
        }
      })
    }


    if(sum===2){
      let url =`/courses/${id}/switch_to_teacher.json`;
      axios.post(url).then((response) => {
        if(response.data.status===0){
          // window.location.href = "/users/" + this.props.current_user.login;
          // this.props.history.replace(newurl);
          window.location.href=newurl
        }
      })
    }

    if(sum===3){
      let url =`/courses/${id}/switch_to_assistant.json`;
      axios.post(url).then((response) => {
        if(response.data.status===0){
          // window.location.href = "/users/" + this.props.current_user.login;
          // this.props.history.replace(newurl);
         window.location.href=newurl
        }
      })
    }


  }
  postsettings=()=>{
    window.location.href = "/courses/" + this.props.match.params.coursesId + "/settings";
  }


	hideAccountProfile=()=>{
		this.setState({
			AccountProfiletype:false
		})
	}

    render() {
        let { Addcoursestypes, coursedata, modalsType, modalsTopval, loadtype,modalsBottomval,antIcon,is_guide,AccountProfiletype} = this.state;

        return (
          <div>
            {
              is_guide && <Guide></Guide>
            }

						{AccountProfiletype===true?<AccountProfile
							hideAccountProfile={()=>this.hideAccountProfile()}
							{...this.props}
							{...this.state}
						/>:""}


            {
              coursedata === undefined || coursedata.status===401? <div id="course_info_1309" className="courseHead" style={{height: '206px'}}></div>:<div id="course_info_1309" className="courseHead" style={{height: '206px'}}>

                {Addcoursestypes === true ? <Addcourses
                  Addcoursestype={Addcoursestypes}
                  hideAddcoursestype={() => this.tojoinclass(2)}
                /> : ""}
                <Modals
                  modalsType={modalsType}
                  modalsTopval={modalsTopval}
                  loadtype={loadtype}
                  modalsBottomval={modalsBottomval}
                  modalCancel={this.modalCancel}
                  modalSave={this.ModalAction}
                  antIcon={antIcon}
                ></Modals>
                <AddTeacherModal ref="addTeacherModal"
                                 {...this.props}
                                 isTeacher={this.state.isTeacher}
                                 moduleName={this.state.isTeacher ? "教师" : "助教"}
                                 addTeacherSuccess={this.addTeacherSuccess}
                ></AddTeacherModal>
                <AddStudentModal ref="addStudentModal"
                                 {...this.props}
                                 moduleName="学生"
                                 addStudentSuccess={this.addStudentSuccess}
                ></AddStudentModal>
                <div className="educontent clearfix educontentTop">
                  <div className="color-white clearfix mb10">

                    {
                      coursedata===undefined || coursedata.status===401 || coursedata.status===407?"":
                        <Tooltip placement="bottom" title={coursedata&&coursedata.name && coursedata.name.length<38?"":coursedata.name}>
                          <span className="font-24 fl bannername">{coursedata.name}</span>
                        </Tooltip>

                    }
                    {/*私有：私有课堂，非课堂成员不能访问

                      公开：公开课堂，非课堂成员可以访问*/}
                    <span className={"TabsWarp"}>
                      <CoursesListType
                        typelist={coursedata.course_end === true ? ["已结束"] : coursedata.is_public === true ? ["公开"] : ["私有"]}
                        typesylename={"mt10"} tipval={coursedata.is_public === true?"":"私有课堂，非课堂成员不能访问"}/>
                    </span>


                  </div>

                  <div className="clearfix ">
                    <div className="fl fl mr40 mb20">

                      <a href={"/users/" + coursedata.teacher_login} className="fl">
                        <img alt="头像" className="radius fl mt3 bannerimgname"
                             src={getImageUrl(`images/` + coursedata.teacher_img)}/>
                      </a>

                      <div className="fl mt13">
                        <p className="color-white">
                          <a href={"/users/" + coursedata.teacher_login}
                             className="color-white bannnerusername">{coursedata.teacher_name}</a>
                        </p>
                      </div>

                      <div className="fl mt13">
                        <p className="color-white bannnerusernames">{coursedata.teacher_school}</p>
                      </div>

                    </div>


                    <div>
                      {coursedata.switch_to_student === true ?
                        <Tooltip placement="bottom" title={
													<pre>由教师/助教身份切换至学生<br/>可进行提交作品、答题等操作</pre>
                        }>
                          <a className="fr user_default_btn user_blue_btn mr20 font-18"
                             onClick={()=>this.switchidentity(1)}
                          > 切换为学生 </a>
                        </Tooltip>
                        :""}

                      {coursedata.switch_to_teacher === true ?
                        <Tooltip placement="bottom" title={
													<pre>由学生身份切换至教师<br/>拥有添加成员、发布作业等管理权限</pre>
                        }>
                          <a className="fr user_default_btn user_blue_btn mr20 font-18"
                             onClick={()=>this.switchidentity(2)}
                          > 切换为老师 </a>
                        </Tooltip>:""}


                      {coursedata.switch_to_assistant === true ?
                        <Tooltip placement="bottom" title={
													<pre>由学生身份切换至助教<br/>拥有添加成员、发布作业等管理权限</pre>
                        }>
                          <a className="fr user_default_btn user_blue_btn mr20 font-18"
                             onClick={()=>this.switchidentity(3)}
                          > 切换为助教 </a>
                        </Tooltip>:""}


                      {coursedata.course_identity === 6&&coursedata.educoder_teacher===false?
                        <a className="fr user_default_btn task-btn-orange font-18 mr20" id="shixun_operation"
                           onClick={() => this.tojoinclass(1)}>加入课堂</a>: ""}

                      {coursedata.course_identity === 6&&coursedata.educoder_teacher===true?
                        <a className="fr user_default_btn task-btn-orange font-18 mr20" id="shixun_operation"
                           onClick={() => this.tojoinclass(1)}>加入课堂</a>: ""}

                      {coursedata.course_identity === 6&&coursedata.educoder_teacher===true?
                        <a className="fr user_default_btn user_blue_btn mr20 font-18" onClick={() => this.ActionPoll(5)}> 复制课堂 </a>: ""}

                      {this.props.isStudent()?<a className="fr user_default_btn user_blue_btn mr20 font-18"
                                                 onClick={() => this.exitclass()}
                      > 退出课堂 </a>:""}

                    </div>

										<style>
											{
												`
												.teachersbox{
												  margin-right:22px !important;
												}
												`
											}
										</style>

                    <div className="clearfix clearfixborder">
                      <ul className="fl color-grey-eb pathInfo pathInfobox mt10">
                        <li className={"mt7 teachersbox"}  >
                          <Link to={"/courses/"+this.props.match.params.coursesId+"/teachers"}>
                            <span className="color-grey-c fl font-16">教师</span>
                            <span
                              className="color-white fl font-16 bannerurli">{coursedata.teacher_count}</span>
                          </Link>
                        </li>

                        <li className={"mt7"}>
                          <Link to={"/courses/"+this.props.match.params.coursesId+"/students"}>
                            <span className="color-grey-c fl font-16">学生</span>
                            <span
                              className={coursedata.credit===null?"color-white fl font-16 bannerurlis":"color-white fl font-16 bannerurli"}>
															{coursedata.student_count}
                            </span>
                          </Link>
                        </li>

                        {/*<li className={"mt7"}>*/}
                        {/*<a>*/}
                        {/*<span className="color-grey-c fl font-16">分班</span>*/}
                        {/*<span className="color-white fl font-16 bannerurli">{coursedata.course_group_count}</span>*/}
                        {/*</a>*/}
                        {/*</li>*/}

                        {coursedata.credit===null?"":<li className={"mt7"}>
                          <a>
                            <span className="color-grey-c fl font-16 mr10">学分</span>
                            <span className="color-white fl font-16 "
                            >{coursedata.credit}</span>
                          </a>
                        </li>}

                        {/*{coursedata.course_end===true? <li className={"mt7"}>*/}
                        {/*<span className="color-grey-c fl font-16">已结束</span>*/}
                        {/*</li>:<li className={"mt7"}>*/}
                        {/*<span className="color-grey-c fl font-16"> 结束</span>*/}
                        {/*<span className="color-white fl font-16"*/}
                        {/*style={{*/}
                        {/*marginLeft:coursedata.deadline===null?"":'8px'*/}
                        {/*}}*/}
                        {/*>{coursedata.deadline===null?"--":coursedata.deadline}</span>*/}
                        {/*</li>}*/}
                      </ul>


                      {this.props.isAdmin()? <ul className="fr color-grey-eb pathInfo pathInfobox mt10"
                                                 style={{
                                                   position: "relative"
                                                 }}
                      >
                        <li className={"mt7 mr10im"}>
                          <a onClick={()=>this.addTeacher(true)}>
                            <span className="color-white fl font-16 bannerurli width100f">添加老师</span>
                          </a>
                        </li>

                        <li className={"mt7 mr10im"}>
                          <a onClick={()=>this.addTeacher(false)}>
                            <span className="color-white fl font-16 bannerurli width100f">添加助教</span>
                          </a>

                        </li>

                        <li className={"mt7 mr10im"}>
                          <a onClick={()=>this.addStudent()}>
                            <span className="color-white fl font-16 bannerurli width100f">添加学生</span>
                          </a>
                        </li>

                        <li className={"mt7 mr10im ml10"} style={{overflow:"hidden"}}>
                          <a>
                            <span className="color-grey-c fl font-16">邀请码</span>
                            <span
                              className={coursedata.code_halt === true? "color-white fl font-16 bannerurli width75f" : "color-white fl font-16 bannerurli width107f marleftf10 color-orange-tip"}>
                                            {coursedata.code_halt === true? "已停用" : coursedata.invite_code}
                              {coursedata.code_halt === true  ? "" :
                                <Tooltip placement="bottom" title={
																	coursedata.code_halt === true? <pre>
																			邀请码已停用<br/>
																			成员不能主动加入课堂
																	</pre>:<pre>
																			成员可以通过邀请码主动加入课堂<br/>
																			点击立刻复制邀请码
																	</pre>
                                }>
                                  <i className="iconfont icon-fuzhi color-white font-14 ml10"
                                     onClick={() => {
                                       jsCopy()
                                     }}></i>
                                </Tooltip>
                              }
                              <input id="copy_invite_code" value={coursedata.invite_code}/>
                                       </span>
                          </a>
                        </li>

                        <li className={"mt7 ml10 mr0 "}>
                          <style>
                            {
                              `
                                     .defaults{cursor:default}
                                     `
                            }
                          </style>
                          <Popover placement="bottom" content={
                            <ul className="sandianbox" style={{
                              display:  'block',
                              right: "-113px",
                              top: "20px"
                            }}>
                              {coursedata.is_public === true?coursedata.course_identity  <3?
                                <div className={"defaults"} onClick={() => this.ActionPoll(2)}>设为私有</div>: "" : ""}

                              {coursedata.is_public === false?coursedata.course_identity <3?
                                <div className={"defaults"}  onClick={() => this.ActionPoll(3)}>设为公开</div> : "": ""}

                              {coursedata.course_identity  <3? <div className={"defaults"}  onClick={() => this.ActionPoll(4)}>
                                {coursedata.code_halt === true ?"启用邀请码":"停用邀请码"}
                              </div>:""}

                              <div className={"defaults"} onClick={this.postsettings}>设置</div>

                              <div className={"defaults"} onClick={() => this.ActionPoll(5)}>复制
                              </div>

                              {coursedata.is_admin===true?coursedata.course_identity  <3?<div className={"defaults"}  onClick={() => this.ActionPoll(1)}>删除</div>
                                :"":""}
                            </ul>
                          }  trigger="hover">
                            <i className="iconfont icon-weibiaoti12 color-white font-14 relative"></i>
                          </Popover>

                        </li>



                      </ul>:""}

                    </div>


                  </div>
                </div>
              </div>
            }
          </div>

        )
    }
}

export default CoursesBanner;


// let id=this.props.match.params.coursesId;
//
// let url="/courses/"+id+"/top_banner.json"
// axios.get(url).then((result)=>{
//     if(result.status===200){
//       let data=result.data;
//         this.setState({
//           coursebannerlist:result.data,
//           name: result.data.name,
//           teacher_name:  result.data.teacher_name,
//           teacher_login:  result.data.teacher_login,
//           teacher_img:  result.data.teacher_img,
//           teacher_school:  result.data.teacher_school,
//           teacher_count:  result.data.teacher_count,
//           student_count:  result.data.student_count,
//           course_group_count:  result.data.course_group_count,
//           credit:  result.data.credit,
//           course_end:  result.data.course_end,
//           deadline:  result.data.deadline,
//           is_teacher:  result.data.is_teacher,
//           is_student:  result.data.is_student,
//           is_admin:  result.data.is_admin,
//           is_public:  result.data.is_public,
//           code_halt:  result.data.code_halt,
//           invite_code: result.data.invite_code,
//           switch_to_student:  result.data.switch_to_student,
//           switch_to_teacher:  result.data.switch_to_teacher,
//           join_course:  result.data.join_course,
//           copy_course:  result.data.copy_course,
//         })
//     }
// coursebannerlist:undefined,
//   name: undefined,
//   teacher_name: undefined,
//   teacher_login: undefined,
//   teacher_img: undefined,
//   teacher_school: undefined,
//   teacher_count: undefined,
//   student_count: undefined,
//   course_group_count: undefined,
//   credit: undefined,
//   course_end: undefined,
//   deadline: undefined,
//   is_teacher: undefined,
//   is_student: undefined,
//   is_admin: undefined,
//   is_public: undefined,
//   code_halt: undefined,
//   invite_code:undefined,
//   switch_to_student: undefined,
//   switch_to_teacher: undefined,
//   join_course: undefined,
//   copy_course: undefined,
// }).catch((error)=>{
//   console.log(error);
// })