import React, { Component } from 'react';

import { Redirect } from 'react-router';

import {Modal, Button, Radio, Input, Checkbox,message,Spin, Icon} from 'antd';

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import PropTypes from 'prop-types';

import classNames from 'classnames';

import { CircularProgress } from 'material-ui/Progress';

import { getImageUrl, toPath } from 'educoder'

import axios from 'axios';

import './Collaborators.css';
import SchoolSelect from "../../../courses/members/modal/AddStudentModal";

const $ = window.$;

const RadioGroup = Radio.Group;

const Search = Input.Search;

class Collaborators extends Component {
    constructor(props) {
        super(props)
        this.state = {
            collaboratorList: [],
            Collaboratorsvisible: false,
            Collaboratorsvisibleadmin: false,
            value: 1,
					  page: 1,
            Searchadmin: [],
            allChangechecked: false,
            Collaboratorslist: [],
            Collaboratorslisttype: false,
            collaborators_deletetype: false,
            collaborators_deletevalue: null,
            onSearchcalue:"",
            collaboratorListsum:10,
            collaboratorListsumtype:true,
					  user_name:undefined,
					  school_name:undefined,
						spinnings:false,
					  useristrue:false
        }
    }
    componentDidMount() {
        let id=this.props.match.params.shixunId;

        let collaborators=`/shixuns/`+id+`/collaborators.json`;
        axios.get(collaborators).then((response)=> {
            if(response.status===200){
                if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

                }else{
                    this.setState({
                        collaboratorList: response.data
                    });
                }

            }
        }).catch((error)=>{
            console.log(error)
        });
    }

    updatacomponentDiddata = () => {
        let id = this.props.match.params.shixunId;

        let collaborators = `/shixuns/` + id + `/collaborators.json`;
        axios.get(collaborators).then((response) => {
            if (response.status === 200) {
                if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

                }else{
                    this.setState({
                        collaboratorList: response.data
                    });
                }
            }
        }).catch((error) => {
            console.log(error)
        });
    }
    CollaboratorsshowModal = (type) => {
        if (type === "cooperation") {
            this.setState({
                Collaboratorsvisibleadmin: false,
                Collaboratorslist:[],
                Searchadmin:[]
            });
        } else if (type === "admin") {
            this.setState({
                Collaboratorsvisible: false,
                Collaboratorslist:[],
                Searchadmin:[]
            });
        } else if (type === "collaborators_deletetype") {
            this.setState({
                collaborators_deletetype: false,
            });
        }
    }

    showCollaboratorsvisible = (type) => {
        this.setState({
            Collaboratorslist: [],
            Searchadmin:[],
            onSearchcalue:""
        })
        let admintype = this.props.identity;
        if (admintype>4) {
            this.props.showSnackbar("您没有权限");
            return
        }
        if (type === "cooperation") {
            this.setState({
                Collaboratorsvisibleadmin: true,
            });
        } else if ("admin") {
            let id = this.props.match.params.shixunId;
            let url = "/shixuns/" + id + "/change_manager.json";
            axios.get(url).then((response) => {
                if (response.status === 200) {
                    // this.setState({
                    //     Collaboratorsvisible: true
                    // })
                    if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

                    }else{
                        this.setState({
                            Collaboratorsvisible: true,
                            Collaboratorslist: response.data
                        })
                    }
                }
            }).catch((error) => {
                console.log(error)
            });

        }
    }

    onChange = (e) => {
        this.setState({
            value: e.target.value,
        });
    }
    onSearchadmins=(e)=>{
        this.setState({
            onSearchcalue:e.target.value
        })
    }
    onSearchadmin = (value) => {

        let {collaboratorList,user_name,school_name} = this.state;
			  this.setState({
				       Searchadmin: [],
					     spinnings:true,
				    })
        // if (value === "") {
        //     this.setState({
        //         Searchadmin: [],
        //         collaboratorList: collaboratorList
        //     })
        // } else {
				//
        // }
			let id = this.props.match.params.shixunId;
			let url = "/shixuns/" + id + "/add_collaborators.json";
			axios.get(url,{params:{
					user_name:user_name ,
					school_name:school_name,
				}}).then((response) => {
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
					this.setState({
						spinnings:false
					})
				}else{
					let newlist = response.data.users;
					for (var i = 0; i < newlist.length; i++) {
						newlist[i].checked = false
					}
					this.setState({
						Searchadmin: newlist,
						collaboratorList: collaboratorList,
						spinnings:false
					})
				}

			}).catch((error) => {
				console.log(error)
			});
    }

    selectChangenickname = (e, key) => {
        let {Searchadmin} = this.state;
        let newlist = Searchadmin;
        for (var i = 0; i < newlist.length; i++) {
            newlist[key].checked = e.target.checked
        }

        let arrlist = [];
        let alltype = false;
        for (var z = 0; z < newlist.length; z++) {
            if (newlist[z].checked === true) {
                arrlist.push(newlist[z])
            }
        }

        if (Searchadmin.length === arrlist.length) {
            alltype = true
        } else {
            alltype = false
        }

        if(newlist.length===0){
					this.setState({
						Searchadmin: newlist,
						allChangechecked: alltype,
					})
				}else{
					this.setState({
						Searchadmin: newlist,
						allChangechecked: alltype,
						useristrue:false
					})
				}


    }
    allChange = (e) => {
        let {Searchadmin} = this.state;
        let newlist = Searchadmin;
        for (var i = 0; i < newlist.length; i++) {
            newlist[i].checked = e.target.checked
        }
        this.setState({
            Searchadmin: newlist,
            allChangechecked: e.target.checked
        })
    }
    submit_add_collaborators_form = () => {
        let id = this.props.match.params.shixunId;
        let {Searchadmin,collaboratorList} = this.state;
        let newlist = Searchadmin;
        let user_ids = []
        if (newlist.length === 0) {
            this.setState({
                Collaboratorslisttype: true
            })
            return
        }
        for (var i = 0; i < newlist.length; i++) {
            if (newlist[i].checked === true) {
                user_ids.push(newlist[i].user_id)
            }
        }

        for(var i=0; i<user_ids.length;i++){
            for(var j=0; j<collaboratorList.length;j++){
                if(user_ids[i]===collaboratorList[j].user.user_id){
                    message.error("添加失败，重复添加！");

                    return
                }
            }
        }

			if(user_ids.length===0){
				this.setState({
					useristrue:true
				})
				return
			}
        let url = "/shixuns/" + id + "/shixun_members_added.json";
        axios.post(url, {
            user_ids: user_ids
        }).then((response) => {
            this.updatacomponentDiddata();
            this.props.showSnackbar(response.data.message);
            this.setState({
                Collaboratorsvisibleadmin: false,
                Collaboratorslist:[],
                Searchadmin:[]
            })
        }).catch((error) => {
            console.log(error)
        });
    }
    addadminredio = (e) => {
        this.setState({
            addadminrediovalue: e
        })

    }
    submit_addadminredio = () => {
        let {addadminrediovalue} = this.state;

        let id = this.props.match.params.shixunId;

        let url = "/shixuns/" + id + "/change_manager.json";
        if(addadminrediovalue===undefined){
            this.setState({
                Collaboratorsvisible: false,
                Collaboratorslist:[],
                Searchadmin:[]
            });
            this.props.showSnackbar("所选人员为空，没有更换成功");
            this.CollaboratorsshowModal("admin")
            return
        }


        axios.post(url, {
            user_id: addadminrediovalue
        }).then((response) => {
            this.setState({
                Collaboratorsvisible: false,
                Collaboratorslist:[],
                Searchadmin:[]
            });
            this.updatacomponentDiddata();
            this.props.showSnackbar(response.data.message);
        }).catch((error) => {
            console.log(error)
        });
    }

    collaborators_delete = (value) => {
        this.setState({
            collaborators_deletetype: true,
            collaborators_deletevalue: value
        })

    }
    collaborators_deletes = () => {
        let {collaborators_deletevalue} = this.state;
        if (collaborators_deletevalue === null) {
            return
        }
        let id = this.props.match.params.shixunId;
        let url = "/shixuns/" + id + "/collaborators_delete.json?user_id=" + collaborators_deletevalue;
        axios.delete(url).then((response) => {
            if (this.props.current_user.user_id == collaborators_deletevalue) {
                this.props.history.push('/shixuns')
                return;
            }
            this.props.showSnackbar(response.data.message);
            this.updatacomponentDiddata();
            this.setState({
                collaborators_deletetype: false
            })
        }).catch((error) => {
            console.log(error)
        });
    }

  loadMore=()=>{
      let {collaboratorList}=this.state;
     this.setState({
       collaboratorListsum:collaboratorList.length,
       collaboratorListsumtype:false
     })
  }


	contentViewScrolledit=(e)=>{
		//滑动到底判断

		if(e.currentTarget.scrollHeight-e.currentTarget.scrollTop===e.currentTarget.clientHeight){
			let {page,collaboratorList,user_name,school_name,Searchadmin} = this.state;
			let newpage=page+1;
      let newSearchadmin=Searchadmin
			let id = this.props.match.params.shixunId;
			let url = "/shixuns/" + id + "/add_collaborators.json";
			axios.get(url,{params:{
					user_name:user_name ,
					school_name:school_name,
					page:newpage
				}}).then((response) => {
				if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

				}else{
					let newlist = response.data.users;
					for (var i = 0; i < newlist.length; i++) {
						newlist[i].checked = false
						newSearchadmin.push(newlist[i])
					}

					console.log(newSearchadmin)
					this.setState({
						Searchadmin: newSearchadmin,
						collaboratorList: collaboratorList,
						page:newpage
					})
				}

			}).catch((error) => {
				console.log(error)
			});

		}

	}

	render() {
        let {
            collaboratorList,
            Collaboratorsvisible,
            Collaboratorsvisibleadmin,
            Searchadmin,
            allChangechecked,
            Collaboratorslist,
            Collaboratorslisttype,
            collaborators_deletetype,
            onSearchcalue,
            collaboratorListsum,
            collaboratorListsumtype,
						user_name,
						school_name,
				  	useristrue
        } = this.state;
        let {loadingContent} = this.props;
        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };
         // console.log(collaboratorList)

		const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

		return (
            <React.Fragment>
                <p className="clearfix mt30"
                   style={{display:this.props.identity<5?"block":"none"}}
                >
                    <a onClick={() => this.showCollaboratorsvisible("cooperation")}
                       className="edu-default-btn edu-greenback-btn fr mr20 height40"
                       data-remote="true">
                        <span className={"line27"}>+ </span>添加合作者
                    </a>
                    <a onClick={() => this.showCollaboratorsvisible("admin")}
                       style={{display:this.props.identity===1?"block":"none"}}
                       data-remote="true"
                       className="edu-default-btn edu-greenback-btn fr mr20 height40">更换管理员</a>
                </p>

                <Modal
                    keyboard={false}
                    title="更换管理员"
                    visible={Collaboratorsvisible}
                    closable={false}
                    footer={null}
                >

                    <div className="mb15 font-14 edu-txt-center color-orange-tip">
                        选择的成员将会成为新的管理员<br/> 您将不再拥有管理员的权限，但您仍是合作团队的一员
                    </div>


                    <div className="clearfix mb15 edu-bg-light-blue edu-max-h200">
                        <ul className="">
                            <li className="clearfix">
                                <RadioGroup onChange={this.onChange} value={this.state.value}>

                                    {
                                        Collaboratorslist.length === 0 ? "" : Collaboratorslist.map((item, key) => {
                                            return (
                                                <Radio key={key} style={radioStyle} value={item.user_id}
                                                       onClick={() => this.addadminredio(item.user_id)}>{item.name}</Radio>
                                            )
                                        })
                                    }

                                </RadioGroup>
                            </li>
                        </ul>
                    </div>

                    <div className="clearfix edu-txt-center mt20">
                        <a className="pop_close task-btn mb10 mr40 colorFFF"
                           onClick={() => this.CollaboratorsshowModal("admin")}>取消</a>
                        <a className="task-btn task-btn-orange"
                           onClick={this.submit_addadminredio}>确定</a>
                    </div>

                </Modal>

                <Modal
                    keyboard={false}
                    title="添加合作者"
                    visible={Collaboratorsvisibleadmin}
                    closable={false}
                    footer={null}
										width={800}
                >
                    {/*<Search*/}
                        {/*placeholder="输入用户的姓名、昵称、邮箱进行搜索"*/}
                        {/*value={onSearchcalue}*/}
                        {/*onSearch={(value) => this.onSearchadmin(value)}*/}
                        {/*onInput={this.onSearchadmins}*/}
                        {/*style={{width: '100%'}}*/}
                    {/*/>*/}
									<span className="mr10">姓名或手机号:</span>

									<Input  placeholder="请输入姓名或手机号码搜索" value={user_name} onInput={(e) => {this.setState({user_name: e.target.value})}}
												 style={{ width: '215px'}}
									></Input>
									<span className="label ml10 " style={{ minWidth: '36px' }}>单位:</span>
								 <Input  placeholder="请输入单位名称" className="ml10" value={school_name} onInput={(e) => {this.setState({school_name: e.target.value})}}
									style={{ width: '215px'}}
								 >
								</Input>

									<a className="task-btn task-btn-orange ml20" onClick={() => this.onSearchadmin()}
										 style={{ height: '30px', lineHeight: '30px', width: '70px'}}
									>搜索</a>
									<p className="clearfix pl35 mt20">
										<span className="fl edu-txt-w100 task-hide font-bd ml10 edu-txt-left">姓名</span>
										<span className="fl edu-txt-w100 task-hide font-bd">职业</span>
										<span className="fl edu-txt-w180 task-hide font-bd ml80">单位</span>
									</p>
                    <div className="mt5" style={{background: '#f7f9fd'}}>
											<Spin indicator={antIcon} spinning={this.state.spinnings}>
												<div className="clearfix">
													<ul className="upload_select_box fl" id="search_not_teachers_list"    onScroll={this.contentViewScrolledit}>
														{Searchadmin.length === 0 ? <li style={{textAlign: 'center'}}>
															<span>请试试搜索一下</span>
														</li> : Searchadmin.map((item, key) => {
															return (
																<li key={key} style={{display: item.identify === "专业人士" ? "none" : "block"}}>
																	<Checkbox className="fl mr20" checked={item.checked}
																						onChange={(e) => this.selectChangenickname(e, key)}
																						id={item.user_id}></Checkbox>
																	<a className="task-hide color-grey3  fl span1 edu-txt-w80 edu-txt-left">{item.nickname}</a>
																	<span className="task-hide fl color-grey edu-txt-w80 span2">{item.identify}</span>
																	<span
																		title={item.school_name}
																		style={{width: '150px'}}
																		className="span3 color-grey fl edu-txt-w260 task-hide ml50 task-hide" >{item.school_name}</span>
																</li>
															)
														})

														}
													</ul>
												</div>
											</Spin>
                    </div>
                    <div className="mt10 clearfix">

										<span className="fl mr15">
												<Checkbox className="fl" checked={allChangechecked} onChange={this.allChange}>全选</Checkbox>
												<div className="fl" style={{height: '27px'}}>
														<span className="color-orange fl" id="add_teacher_notice"
																	style={{display: Collaboratorslisttype === true ? 'inline' : 'none'}}>请至少选择一个用户</span>
												</div>
										</span>


                    </div>
									{useristrue===true?<span className={"color-red"}>请先选择用户</span>:""}
                    <div className="clearfix edu-txt-center mt20">
                        <a className="pop_close task-btn mb10 mr40 colorFFF"
                           onClick={() => this.CollaboratorsshowModal("cooperation")}>取消</a>
                        <a className="task-btn task-btn-orange"
                           onClick={() => this.submit_add_collaborators_form()}>确定</a>
                    </div>
                </Modal>

                <div  className="pl20" id="collaborators_list_info">
                    {
                        collaboratorList===undefined?"":collaboratorList.map((item,key)=>{
                          if(key<collaboratorListsum){
                            return(
                                <div className="collaborators-item clearfix" key={key}>
                                    <a href={item.user.user_url} target="_blank" className="mr20 fl">
                                        <img alt="用户头像" className="radius" height="80" src={getImageUrl("images/"+item.user.image_url)} width="80"/></a>
                                    <div className="fl collaborators-item-middle">
                                        <p className="mb10">
                                            <a href={item.user.user_url} target="_blank">{item.user.name}</a>

                                            <span className="ml20"  style={{display:this.props.power===false?"none":"inline-block"}}>{item.user.shixun_manager === true ? "(管理员)" : ""}</span>
                                        </p>

                                        <p className="color-grey-B2 font-12 mb10"><span className="mr20">{item.user.identity}</span><span>{item.user.school_name}</span></p>

                                        <p className="mb10">
                                            <span className="mr20">发布&nbsp;&nbsp;{item.user.user_shixuns_count}</span>
                                            {/*<span>粉丝&nbsp;&nbsp;*/}
                                            {/*<span id="user_h_fan_count">{item.user.fans_count}</span>*/}
                                            {/*</span>*/}
                                        </p>

                                        {/* <p className="color-grey-B2 task-hide">{item.user.brief_introduction}</p> */}


                                    </div>

                                    {item.user.shixun_manager === true ? "" : <a className="fr color-grey-c mr40 mt35 font-16"
                                                                                 style={{display: this.props.power === false ? "none" : "block"}}
                                                                                 onClick={() => this.collaborators_delete(item.user.user_id)}>删除</a>}
                                    {/*<a href="/watchers/unwatch?object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr user_default_btn user_private_btn mt30 font-16 mr20" data-method="post" data-remote="true" rel="nofollow">取消关注</a>*/}
                                </div>

                            )
                          }
                        })
                    }
                    <Modal
                        keyboard={false}
                        title="提示"
                        visible={collaborators_deletetype}
                        closable={false}
                        footer={null}
                    >
                        <div className="task-popup-content">
                            <div className="task-popup-text-center font-14">确定要删除吗？</div>
                        </div>
                        <div className="task-popup-submit clearfix">
                            <a className="pop_close task-btn mb10 mr40 colorFFF"
                               onClick={() => this.CollaboratorsshowModal("collaborators_deletetype")}>取消</a>
                            <a className="task-btn task-btn-orange fr" onClick={this.collaborators_deletes}>确定</a>
                        </div>

                    </Modal>
                </div>

              <div
                className={collaboratorList.length>10&&collaboratorListsumtype===true?"":"none"}
                style={{textAlign:'center',borderTop:'1px solid #eee'}}>
                <a className="loadMore" onClick={this.loadMore}>加载更多</a>
              </div>

      </React.Fragment>

	    );
  	}
}

export default Collaborators;
