import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import {Tooltip,Modal,Icon,Spin,message} from 'antd';
import '../../paths/ShixunPaths.css';
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
import DetailCardsEditAndEdit from './DetailCardsEditAndEdit';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import axios from 'axios';
import { DragDropContext ,  Draggable, Droppable} from 'react-beautiful-dnd';
import Modals from '../../modals/Modals';

const $ = window.$
//
// //a little function to help us with reordering the result
// const reorder =  (list, startIndex, endIndex) => {
//   let newlist=list;
//   const result = Array.from(newlist.shixuns_list);
//   const [removed] = result.splice(startIndex, 1);
//   result.splice(endIndex, 0, removed);
//   newlist.shixuns_list=result;
//   return newlist;
// };
//



class DetailCards extends Component{
  constructor(props){
    super(props)
    this.state={
      pathCardsList:undefined,
      dropid:undefined,
      dropidtype:false,
      idsum:undefined,
      pathCardsedittype:false,
      pathlistedit:undefined,
      pathid:undefined,
      Modalstype:false,
      Modalstopval:'',
      Modalsbottomval:'',
      cardsModalsave:this.cardsModalsave,
      cardsModalcancel:this.cardsModalcancel,
      delecttype:false,
      editdelectid:undefined,
      editbuttomtype:false,
      editbuttomtypeadd:false,
      showparagraph:false,
      showparagraphkey:"",
      showparagraphindex:"",
			isSpin:false
    }


    // this.onDragEnd = this.onDragEnd.bind(this);
  }

  getPathCardsList(){
    let pathid=this.props.match.params.pathId;
    let url=`/stages.json?subject_id=`+pathid;
    axios.get(url).then((result)=>{
      if(result.status===200){
        this.setState({
          pathCardsList:result.data.stages,
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }


  for_paragraph = (index) =>{
    $("#detail_for_paragraph_"+index).slideToggle(500);
  }

  componentDidMount(){
    let pathid=this.props.match.params.pathId;
    this.setState({
      pathid:pathid
    })
    this.getPathCardsList();

  }

  // onDragStart = () => {
  //   /*...*/
  // };
  // onDragUpdate = () => {
  //   /*...*/
  // }
  //
  // onDragEnd (result) {
  //
  //   let{pathCardsList}=this.state;
  //   // dropped outside the list
  //   let newpathCardsList=pathCardsList;
  //   if(!result.destination) {
  //     return;
  //   }
  //   var sum=result.source.droppableId.replace('ids','')
  //       sum=parseInt(sum)
  //
  //   const items = reorder(
  //     newpathCardsList[sum],
  //     result.source.index,
  //     result.destination.index
  //   );
  //   newpathCardsList[sum]=items
  //   this.setState({
  //     pathCardsList:newpathCardsList
  //   })
  // }

  pathCardsedit=(key,pathid)=>{

    let url=`/stages/`+pathid+`/edit.json`;
    axios.get(url).then((result)=>{
      if(result.status===200){
        this.setState({
          idsum:key,
          pathCardsedittype:true,
          pathlistedit:result.data,
          editbuttomtype:true,
          editbuttomtypeadd:true
        })
      }
    }).catch((error)=>{
      console.log(error);
    })

  }

  updatapathCardsedit=()=>{
    this.setState({
      idsum:undefined,
      pathCardsedittype:false,
      editbuttomtype:false,
      editbuttomtypeadd:false
    })
    this.getPathCardsList();
    this.props.updatadetailInfoLists();
  }

  delectpathCardsedit=(id)=>{

    this.setState({
      Modalstype:true,
      Modalstopval:'是否删除该章节？',
      Modalsbottomval:'',
      editdelectid:id,
      delecttype:true,
    })

  }

  delectpathCardseditfun=()=>{
    let {delecttype,editdelectid}=this.state;
    let id=editdelectid;
    if(delecttype===true){
      let url ='/stages/'+id+'.json'
      axios.delete(url).then((response) => {
        if(response.data.status===1){
          // window.location.href = "/paths/" + response.data.subject_id
          this.setState({
            idsum:undefined,
            pathCardsedittype:false,
            Modalstype:false,
            Modalstopval:'',
            Modalsbottomval:'',
            cardsModalsave:this.cardsModalsave,
            delecttype:false,
            editdelectid:undefined
          })
          this.getPathCardsList();
        }
      }).catch((error) => {
        console.log(error)
      })
    }

  }

  // 关卡的上移下移操作
  operations = (url) => {
    let newurl = url+".json"
    axios.get(newurl).then((response) => {
      if(response.data.status===1){
        this.getPathCardsList();
      }
    }).catch((error) => {
      console.log(error);
    })

  }
  startgameid=(id)=>{

		let url = "/shixuns/" + id + "/shixun_exec.json";
		axios.get(url).then((response) => {

			if (response.data.status === -2) {
				this.setState({

					shixunsreplace:true,
					hidestartshixunsreplacevalue:response.data.message+".json"
				})
			} else if (response.data.status === -1) {
				console.log(response)
			}else if(response.data.status===-3){
				this.setState({
					shixunsmessage:response.data.message,
					startshixunCombattype:true,
				})
			} else {
				window.location.href = "/tasks/" + response.data.game_identifier;
				// window.location.href = path
				// let path="/tasks/"+response.data.game_identifier;
				// this.props.history.push(path);
			}
		}).catch((error) => {

		});


  }

	hidestartshixunsreplace=(url)=>{
		this.setState({
			isSpin:true,
		})
		axios.get(url).then((response) => {
			debugger
			if(response.status===200){
				// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
				// this.props.history.push(path);
				message.success('重置成功，正在进入实训！');
				this.startgameid(response.data.shixun_identifier);
				this.setState({
					shixunsreplace:false,
					isSpin:false,
					startbtn:false,
				})

				// message.success('重置成功，正在进入实训！');
				// this.startshixunCombat();
			}}
		).catch((error) => {

		});

	}

  cardsModalcancel=()=>{
    this.setState({
      Modalstype:false,
      Modalstopval:'',
      Modalsbottomval:'',
      editdelectid:undefined
    })
  }
  cardsModalsave=()=>{
    this.setState({
      Modalstype:false,
      Modalstopval:'',
      Modalsbottomval:'',
      editdelectid:undefined
    })
  }

  editeditbuttomtypecanle=()=>{
    this.setState({
      editbuttomtype:true,
      editbuttomtypeadd:false
    })
  }

  showparagraph=(key,index)=>{
    this.setState({
      showparagraph:true,
      showparagraphkey:key,
      showparagraphindex:index
    })
  }

  hideparagraph=()=>{
    this.setState({
      showparagraph:false
    })
  }

	hidestartshixunCombattype=()=>{
		this.setState({
			startshixunCombattype:false
		})
	}
  render(){
    let { pathCardsList,
      dropid,
      dropidtype,
      idsum,
      pathCardsedittype,
      pathlistedit,
      pathid,
      Modalstype,
      Modalstopval,
      Modalsbottomval,
      cardsModalsave,
      cardsModalcancel,
      delecttype,
			hidestartshixunsreplacevalue,
      editbuttomtype,
      editbuttomtypeadd,
      showparagraph,
      showparagraphkey,
      showparagraphindex
    }=this.state;
		const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
    return(
      <div>
        <Modals
          modalsType={Modalstype}
          modalsTopval={Modalstopval}
          modalsBottomval={Modalsbottomval}
          modalCancel={cardsModalcancel}
          modalSave={delecttype===true?this.delectpathCardseditfun:cardsModalsave}
        >
        </Modals>
				<Modal
					keyboard={false}
					title="提示"
					visible={this.state.startshixunCombattype}
					closable={false}
					footer={null}
				>
					<div className="task-popup-content">
						<p className="task-popup-text-center font-16 pb20">本实训的开启时间：{this.state.shixunsmessage} <br/>开启时间之前不能挑战 </p>
					</div>
					<div className="task-popup-submit clearfix">
						{/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
						<a className="task-btn task-btn-orange fr"
							 style={{marginRight:'51px'}}
							 onClick={this.hidestartshixunCombattype}>知道了</a>
					</div>
					{/*<p className="inviteTipbtn with100 fl">*/}
					{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
					{/*</p>*/}
				</Modal>

				<Modal
					keyboard={false}
					title="提示"
					visible={this.state.shixunsreplace}
					closable={false}
					footer={null}
				>
					<Spin indicator={antIcon} spinning={this.state.isSpin}>
						<div className="task-popup-content">
							<p className="task-popup-text-center font-16 pb20">实训已经更新了，正在为您重置!</p>
						</div>
						<div className="task-popup-submit clearfix">
							<a className="task-btn task-btn-orange fr"
								 style={{marginRight:'51px'}}
								 onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
						</div>
					</Spin>
				</Modal>
        <div className="lesson-saved-list">
          {
            pathCardsList && pathCardsList.map((item,key)=>{

              return(
                <div className={"lesson-saved-list-item"} id={"stage_div_"+key} >
                  <p className="clearfix title-line">

                    <a className="fl ring-blue mr10 mt2">
                      <img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
                    </a>
                    <span className="font-18 font-bd">{item.stage_name}</span>
                    {
                      idsum===key&&pathCardsedittype===true?'':

                        this.props.detailInfoList===undefined?"":this.props.detailInfoList.allow_statistics===true?
                          <a>
                            <a className="fr mtf3">
                              { editbuttomtype===true?'':
                                <Tooltip placement="bottom" title="编辑"
                                         onClick={() => this.pathCardsedit(key, item.stage_id)}>
                                  <i className="iconfont icon-bianjidaibeijing font-22 color-green"></i>
                                </Tooltip>
                              }
                            </a>
                            {
                              pathCardsList.length=== key+1?"":<a className="fr ring-op-green mr20" onClick={()=>this.operations(item.down_path)}>
                                <Tooltip placement="bottom" title="向下移动">
                                  <img src={getImageUrl("images/educoder/icon/movedown.svg")} className="fl mt2 ml4"/>
                                </Tooltip>
                              </a>
                            }


                            {key===0?"":
                            <a className="fr ring-op-green mr20" onClick={()=>this.operations(item.up_path)}>
                              <Tooltip placement="bottom" title="向上移动">
                                <img src={getImageUrl("images/educoder/icon/moveup.svg")} className="fl mt2 ml4"/>
                              </Tooltip>
                            </a>}

                          </a>:""


                    }

                    {
                      idsum === key && pathCardsedittype === true ?
                        this.props.detailInfoList===undefined?"":this.props.detailInfoList.allow_statistics===true?
                        <a className="fr" onClick={()=>this.delectpathCardsedit(item.stage_id)}>
                          <Tooltip placement="bottom" title="删除">
                            <i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i>
                          </Tooltip>
                        </a>:""
                        : ''
                    }
                  </p>


                  {
                    idsum===key&&pathCardsedittype===true?'':
                      <div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
                        <p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>

                        <div>

                          {
                            item.shixuns_list && item.shixuns_list.map((line,index)=>{
                              return(
                                <div className="clearfix paragraph lineh-30" onMouseEnter={()=>this.showparagraph(key,index)} onMouseLeave={this.hideparagraph}>

                                  <li className="fl li-width63">

                                      <span className="progressRing mr10">
                                      {
                                        line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
                                          :<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
                                      }
                                      </span>
                                    <span className={line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
                                        <span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
                                      </span>

                                  </li>
                                  {
                                    line.shixun_status==="暂未公开"?
                                      <li className="fr status_li"><span className="fr color204">暂未公开</span></li>
                                      :
                                      <li className={showparagraph===false?"none":"fr status_li"}>
                                        {
                                          showparagraphkey===key&&showparagraphindex===index?<div>
                                            <Link to={'/shixuns/'+line.identifier+'/challenges'} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</Link>
                                            <a  onClick={()=>this.startgameid(line.identifier)} className="btn_auto user_bluebg_btn fl" id="shixun_operation" >开始实战</a>
                                          </div>:""
                                        }

                                      </li>
                                  }
                                </div>)
                            })
                          }
                        </div>
                      </div>
                  }


                  <DetailCardsEditAndEdit
                    idsum={idsum}
                    keys={key}
                    pathCardsedittype={pathCardsedittype}
                    updatapathCardsedits={this.updatapathCardsedit}
                    pathlisteditlist={pathlistedit}
                    stageid={item.stage_id}
                    pathid={pathid}
                  ></DetailCardsEditAndEdit>


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


        { editbuttomtypeadd===true?'':
          <DetailCardsEditAndAdd
            sum={ pathCardsList && pathCardsList.length+1}
            pathid={pathid}
            detailInfoList={this.props.detailInfoList}
            getPathCardsLists={this.updatapathCardsedit}
            editeditbuttomtypes={this.editeditbuttomtypecanle}
          ></DetailCardsEditAndAdd>
            }

      </div>
    )
  }
}
export default DetailCards;






//                  {
//                     idsum===key&&pathCardsedittype===true?'':
//                      <div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
//                         <p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
//
//
//                         <DragDropContext onDragEnd={this.onDragEnd}>
//                             <Droppable
//                               droppableId={'ids'+key}
//                             >
//                               {(provided, snapshot) => (
//
//                             <div
//                               ref={provided.innerRef}
//                               {...provided.droppableProps}
//                             >
//
//                             {
//                             item.shixuns_list && item.shixuns_list.map((line,index)=>{
//                             return(
//                               <Draggable
//                                 key={'id'+index}
//                                 draggableId={'id'+index}
//                                 index={index}
//                               >
//                                 {(provided, snapshot) => (
//                                 <div className="clearfix paragraph lineh-30"
//                                      ref={provided.innerRef}
//                                      {...provided.draggableProps}
//                                      {...provided.dragHandleProps}
//                                 >
//
//                                 <li className="fl li-width63">
//
//                                     <span className="progressRing mr10">
//                                     {
//                                       line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
//                                       :<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
//                                     }
//
//                                     </span>
//
//                                     <span className={line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
//                                       <span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
//                                     </span>
//
//                                     </li>
//                                       {
//                                       line.shixun_status==="暂未公开"?
//                                       <li className="fr status_li"><span className="fr color204">暂未公开</span></li>
//                                       :
//                                         <li className="fr status_li">
//                                         <a href={line.shixun_path} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</a>
//                                         <a href={line.tpi_path} class="btn_auto user_bluebg_btn fl" id="shixun_operation" target="_blank">开始实战</a>
//                                 </li>
//                                  }
//                                   {provided.placeholder}
//                                      </div>
//                                 )}
//                                 </Draggable>
//                                    )
//                                 })
//                               }
//                             </div>
//                           )}
//                         </Droppable>
//                       </DragDropContext>
//                     </div>
// }