import React, { Component } from 'react';
import { Link } from "react-router-dom";
import { markdownToHTML, configShareForCustom} from 'educoder'
import { Divider, Tooltip } from 'antd';
import LoadingSpin from '../../../../common/LoadingSpin';
import 'antd/lib/pagination/style/index.css';
import '../shixunchildCss/Challenges.css';
import axios from 'axios';
const $ = window.$;


class Challengesjupyter extends Component {
	constructor(props) {
		super(props)
		this.state = {
			ChallengesDataList: undefined,
			operate: true,
			startbtns: false,
			iFrameHeight: '0px',
			jupyter_port:0,
			jupyter_url:null,
			username:"",
			booljupyterurls:false,
			loading:false,
			boxoffsetHeigh:0,
			opentitletype:true,
			enlarge:false,
		}
	}

	ChallengesList = () => {
		let id = this.props.match.params.shixunId;
		let ChallengesURL = `/shixuns/` + id + `/challenges.json`;

		axios.get(ChallengesURL).then((response) => {
			if (response.status === 200) {
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

				}else{
					configShareForCustom(this.props.shixunsDetails.name, response.data.description)
					this.setState({
						ChallengesDataList: response.data,
						sumidtype: false,
					});
				}
			}
		}).catch((error) => {
			//console.log(error)
		});
	}
	componentDidUpdate = (prevProps,prevState) => {

		//防止陷入无限循环
		if(prevState.ChallengesDataList!=this.state.ChallengesDataList){
			let boxoffsetHeigh;
			let box=document.getElementById("shixunchallengesid");
			if(box){
				boxoffsetHeigh=box.offsetHeight
				if(boxoffsetHeigh<260){
					this.setState({
						opentitletype:false,
						boxoffsetHeigh:boxoffsetHeigh
					})
				}else{
					this.setState({
						boxoffsetHeigh:boxoffsetHeigh
					})
				}

			}
		}

	}
	componentDidMount() {
		setTimeout(this.ChallengesList(), 1000);
		let id = this.props.match.params.shixunId;
		let ChallengesURL = `/jupyters/get_info_with_tpm.json`;
     let datas={
			 identifier:id,
		 }
		axios.get(ChallengesURL, {params: datas}).then((response) => {
			if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
				setTimeout(() => {
					this.setState({
						booljupyterurls:true,
					})
				}, 600)
				}else{
				  if(response.data.status===0){

						setTimeout(() => {
							this.setState({
								jupyter_url:response.data.url,
								jupyter_port:response.data.port,
								booljupyterurls:true,
							})
						}, 800)

					}else{
						setTimeout(() => {
							this.setState({
								booljupyterurls:true,
							})
						}, 600)

					}
				}


		}).catch((error) => {
			setTimeout(() => {
				this.setState({
					booljupyterurls:true,
				})
			}, 600)

		});
	}

	updatamakedowns = () => {
		this.setState({
			loading:true,
			booljupyterurls:false
		})
		let id = this.props.match.params.shixunId;
		let ChallengesURL = `/jupyters/get_info_with_tpm.json`;
		let datas={
			identifier:id,
		}
		axios.get(ChallengesURL, {params: datas}).then((response) => {
			if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
				setTimeout(() => {
					this.setState({
						booljupyterurls:true,
					})
				}, 600)
			}else{
				if(response.data.status===0){
					setTimeout(() => {
						this.setState({
							jupyter_url:response.data.url,
							jupyter_port:response.data.port,
							booljupyterurls:true,
						})
					}, 800)
					this.setState({

					})
				}else{
					setTimeout(() => {
						this.setState({
							booljupyterurls:true,
						})
					}, 600)
				}
			}
		}).catch((error) => {
			setTimeout(() => {
				this.setState({
					booljupyterurls:true,
				})
			}, 600)

		});

	}


	modifyjupyter=()=>{
		let id=this.props.match.params.shixunId;
     var jupyter_port="";
			 try{
				 jupyter_port= parseInt(this.state.jupyter_port);
			 }catch (e) {
				 jupyter_port=this.state.jupyter_port;

			 }
		const url=`/jupyters/save_with_tpm.json`;
		const data={
			identifier:id,
			jupyter_port:jupyter_port,
		}
		axios.get(url,  {params: data})
			.then((result) => {
				if (result.data.status === 0) {
					this.props.showNotification(`应用成功`);
				}
			}).catch((error) => {
		})

	}
	opentitle=()=>{
		this.setState({
			opentitletype:!this.state.opentitletype
		})
	}

	onclki=(bool)=>{
		this.setState({
			enlarge:bool
		})
	}


	render() {
		let{ChallengesDataList,booljupyterurls,enlarge}=this.state;
		let id = this.props.match.params.shixunId;
		//老师
		const  is_teacher = this.props&&this.props.current_user&&this.props.current_user.is_teacher?this.props.current_user.is_teacher:false;
		//运营人员
		const  business  = this.props&&this.props.current_user&&this.props.current_user.business?this.props.current_user.business:false;
		//管理员
		const  admin = this.props&&this.props.current_user&&this.props.current_user.admin?this.props.current_user.admin:false;

		let  mysidentity =false;
		try {
			mysidentity =this.props.identity < 5 &&ChallengesDataList&& ChallengesDataList.shixun_status< 3?true:false;
		}catch (e) {

		}

		return (
			<React.Fragment>
				<div className="">
					<p className="clearfix mb20 edu-back-white">
						<div className={"shixunjianjie"}>
							<span className="font-16 fl">简介</span>
							<Tooltip placement="bottom" title={"编辑"}>
								<Link style={{ display: this.props.identity < 5 && ChallengesDataList&&ChallengesDataList.shixun_status < 3 ? "block" : 'none' }}
									 to={"/shixuns/" + id + "/settings?edit=1"} className="fr color-blue font-14">
									编辑
								</Link>
							</Tooltip>
						</div>
						{this.state.opentitletype===true?<style>
							{
								`
									#shixunchallengesid{
								    	max-height: 260px;
									    overflow: hidden;
									}
									`
							}
						</style>:""}
						<div>

							<div className={"pd20"} id={"shixunchallengesid"}>
								<p id="ReactMarkdown" style={{overflow:'hidden'}}>
									{ChallengesDataList === undefined ? "" :ChallengesDataList&&ChallengesDataList.description===null?"":
										<div className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(ChallengesDataList.description).replace(/▁/g,"▁▁▁")}}></div>
									}
								</p>
								{
									booljupyterurls===true?
										(
											this.state.jupyter_url === null?
												<div className="mt50 intermediatecenter juplbool">
													<span className="icon iconfontysl icon-jiazaishibai1"></span>
													<p className="intermediatecenter sortinxdirection mt5 juplboolp"><p className="colorbluetest">加载实训失败，</p><p className="colorbluetwo" onClick={()=>this.updatamakedowns()}>重新加载</p></p>

												</div>

												:""
										)
										:""
								}
							</div>

							{this.state.opentitletype===true?<Divider dashed={true} onClick={()=>this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
								<a className={"font-14  color-grey-9"}>阅读全文 <i className={"iconfont icon-jiantou9 font-14"}></i></a>
							</Divider>:<Divider dashed={true} onClick={()=>this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
								<a className={"font-14  color-grey-9"}>收起全文 <i className={"iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-14"}></i></a>
							</Divider>}
						</div>

					</p>

					<div className="justify break_full_word new_li edu-back-white"
							 id="challenge_editorMd_description">
						<style>
							{
								`
								.intermediatecenter{
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								}
								
								.sortinxdirection{
									display: flex;
									flex-direction:row;
									}
									
									.xaxisreverseorder{
									display: flex;
									flex-direction:row-reverse;
									}
									
								;						
							}
								`
							}
						</style>
						{
							this.state.jupyter_url === null || this.state.jupyter_url === undefined ?
								""
								:
								(
								admin===true||business===true||mysidentity===true?
									<div style={{
										height: '63px',
									}} className={enlarge?"shixunjianjiecballenges edu-back-white intermediatecenter  fangdaone":"shixunjianjiecballenges edu-back-white  mt20"}>

										<div className={enlarge?"sortinxdirection jupyterswidth":"sortinxdirection"}  >
											<div className="renwuxiangssi sortinxdirection">
												<div><p className="renwuxiangqdiv">任务详情</p></div>
												<div><p className="renwuxiangqdivtest ml1 shixunbingbaocun">（请将实训题目写在下方并保存）</p></div>
											</div>
											<div className="renwuxiangssit xaxisreverseorder">
												{
													enlarge===true?
														<i className="iconfont icon-suoxiao2 font-20 ml2 ysliconfont" style={{
															marginLeft: '30px',
														}}  onClick={()=>this.onclki(false)}></i>
														:
														<i className="iconfont icon-fangda font-20 ml2 ysliconfont" style={{
															marginLeft: '30px',
														}}  onClick={()=>this.onclki(true)}></i>
												}
												<div className="challenbaocun" onClick={() => this.modifyjupyter(this.state)}><p
													className="challenbaocuntest">导入</p>
												</div>
											</div>
										</div>
										</div>

							    :
										""
								)

						}

						<style>
							{
								`
								iframe {
									border-width: 0px;
									border-style: inset;
									border-color: initial;
									border-image: initial;
							}
							iframe {
								  border-left: 1px solid #eeeeee;
									border-top: 1px solid #eeeeee;
									border-right: 1px solid #eeeeee;
									border-bottom: 1px solid #eeeeee;
							}
							#header{
							visibility:hidden;
							}
							
						
							
							
								`
							}
						</style>
						{
						admin===true||business===true||mysidentity===true?
									<div>
										<div  className={"pb47"}>
											{
												this.state.jupyter_url===null || this.state.jupyter_url===undefined?
													(
														booljupyterurls===false?
															<LoadingSpin></LoadingSpin>
															:""
													)
													:
													<iframe src={this.state.jupyter_url} className={enlarge?"fangdatwo":""}
																	sandbox="allow-same-origin allow-scripts allow-top-navigation " scrolling="no" id="frame"
																	name="framename" width="100%" height="700" frameBorder="0"
													></iframe>
											}
										</div>
									</div>
									:""
						}
					</div>
				</div>

			</React.Fragment>

		)
	}
}

export default Challengesjupyter;