import React,{ Component } from "react";
import { Modal,Checkbox,Upload,Button,Icon,message,DatePicker,Select,Tooltip} from "antd";
import axios from 'axios';
import Modals from '../../modals/Modals';
import {getUrl,handleDateString,bytesToSize,appendFileSizeToUploadFileAll} from 'educoder';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
function range(start, end) {
	const result = [];
	for (let i = start; i < end; i++) {
		result.push(i);
	}
	return result;
}
function disabledDateTime() {
	return {
		// disabledHours: () => range(0, 24).splice(4, 20),
		disabledMinutes: () => range(1, 30).concat(range(31, 60)),
		// disabledSeconds: () => [0, 60],
	};
}

function disabledDate(current) {
	return current && current < moment().endOf('day').subtract(1, 'days');
}


const dateFormat="YYYY-MM-DD HH:mm";
class Sendresource extends Component{
	constructor(props){
		super(props);
		this.state={
			group_ids:[],
			fileList:[],
			Modalstype:false,
			Modalstopval:"",
			ModalCancel:"",
			ModalSave:"",
			fileListtype:false,
			loadtype:false,
			is_unified_setting:true,
			is_public:false,
			datatime:undefined,
			// moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			course_group_publish_times:[
				{
					course_group_id : undefined,
					publish_time :""
				}],
			course_groups:undefined,
			course_groups_count:undefined
		}
	}


	componentDidMount() {

		let coursesId=this.props.match.params.coursesId;
		if(this.props.isAdmin()){
			let url = `/courses/${coursesId}/all_course_groups.json`

			axios.get(url, {
				})
				.then((response) => {
					this.setState({
						course_groups: response.data.course_groups,
						course_groups_count:response.data.course_groups_count
					})
				})
				.catch(function (error) {
					console.log(error);
				});
		}

	}

	//勾选实训
	shixunhomeworkedit=(list)=>{

		this.setState({
			group_ids:list
		})

	}
	// 附件相关 START
	handleChange = (info) => {

		let fileList = info.fileList;
		if(info.file.status!="removed"){
			this.setState({
				fileList: appendFileSizeToUploadFileAll(fileList),
				fileListtype:true
			});
		}else{
			this.setState({
				fileList: appendFileSizeToUploadFileAll(fileList),
			});
		}
	}

	// onAttachmentRemove = (file) => {
	//
	// 	this.setState({
	// 		fileListtype:false,
	// 	})
	//   // confirm({
	//   //   title: '确定要删除这个附件吗?',
	//   //   okText: '确定',
	//   //   cancelText: '取消',
	//   //   // content: 'Some descriptions',
	//   //   onOk: () => {
	//   //     this.deleteAttachment(file)
	//   //   },
	//   //   onCancel() {
	//   //     console.log('Cancel');
	//   //   },
	//   // });
	//   // return false;
	//
	//   // this.setState({
	//   //   Modalstype:true,
	//   //   Modalstopval:'确定要删除这个附件吗?',
	//   //   ModalSave: ()=>this.deleteAttachment(file),
	//   //   ModalCancel:this.cancelAttachment
	//   // })
	//   // return false;
	//
	//   this.deleteAttachment(file);
	// }


	onAttachmentRemove = (file) => {
	 if(!file.percent || file.percent == 100){
		 const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
		 axios.delete(url, {
			 })
			 .then((response) => {
				 if (response.data) {
					 const { status } = response.data;
					 if (status == 0) {
						 this.setState({
							 fileListtype:false,
							 fileList:[]
						 })
					 }

				 }
			 })
			 .catch(function (error) {
				 console.log(error);
			 });
		 this.setState({
			 fileListtype:false,
		 })
	 }else{
		 this.setState({
			 fileListtype:false,
			 fileList:[]
		 })
	 }
	}

	ModalCancelModalCancel=()=>{
		this.setState({
			Modalstype:false,
			Modalstopval:"",
			ModalSave:this.ModalCancelModalCancel,
			loadtype:false
		})
		this.props.Cancel()
	}
	Saves=()=>{

		let id=this.props.categoryid;
		let {fileList,description,is_public,is_unified_setting,datatime,course_group_publish_times} =this.state;

		let newfileList=[];
		for(var list of fileList){
			newfileList.push(list.response.id)
		}

		if(newfileList.length===0){
			this.setState({
				newfileListtype:true
			})
			return
		}
		// if(is_unified_setting===false){
		//   course_group_publish_times.forEach((item,key)=>{
		//     if(item.course_group_id===undefined||item.publish_time===undefined){
		//       this.setState({
		//         course_group_publish_timestype:true
		//       })
		//       return
		//     }
		//   })
		//
		// }



		if(description===undefined){

		}else if(description.length>100){

			this.setState({
				descriptiontype:true
			})
			return
		}

		let coursesId=this.props.match.params.coursesId;
		let attachmentId=this.props.attachmentId;
		let url="/files/upload.json";


		axios.post(url,{
			course_id:coursesId,
			course_second_category_id:this.props.coursesidtype===undefined||this.props.coursesidtype==="node"?0:attachmentId,
			attachment_ids:newfileList,
			is_public:is_public,
			is_unified_setting:is_unified_setting,
			publish_time:is_unified_setting===true?datatime===undefined? moment(new Date()).format('YYYY-MM-DD HH:mm'):datatime:undefined,
			description:description,
			course_group_publish_times:is_unified_setting===false?course_group_publish_times:undefined
		}).then((result)=>{

			if(result.data.status===0){
				// this.setState({
				//   Modalstype:true,
				//   Modalstopval:result.data.message,
				//   ModalSave:this.ModalCancelModalCancel,
				//   loadtype:true
				// })
				this.ModalCancelModalCancel();
				this.props.updataleftNavfun();
				// this.props.showNotification(result.data.message);
				this.props.showNotification("上传资源成功");
				this.props.setupdate(this.props.attachmentId)
			}
		})



	}

	settextarea=(e)=>{
		this.setState({
			description:e.target.value
		})
	}

	onChangesetting=(e)=>{

		this.setState({
			is_unified_setting:e.target.checked
		})

	}

	onChangepublic=(e)=>{

		this.setState({
			is_public:e.target.checked
		})

	}

	onChangeTimepublish= (date, dateString,key,type) => {
		if(type===1){
			this.setState({
				datatime:handleDateString(dateString),
			})
		}else if(type===2){
			let {course_group_publish_times}=this.state;
			let newgroup_publish=course_group_publish_times;
			for(var i=0; i<newgroup_publish.length; i++){
				if(i===parseInt(key)){
					newgroup_publish[i].publish_time=handleDateString(dateString);
				}
			}
			this.setState({
				course_group_publish_times:newgroup_publish,
			})
		}

	}

	selectassigngroups=(e,index,key)=>{
		let {course_group_publish_times}=this.state;
		let newgroup_publish=course_group_publish_times;
		for(var i=0; i<newgroup_publish.length; i++){
			if(i===parseInt(key)){
				newgroup_publish[i].course_group_id=index.props.value;
			}
		}
		this.setState({
			course_group_publish_times:newgroup_publish,
		})
	}

	deletegrouppublish=(key)=>{
		let newlist=this.state.course_group_publish_times;
		newlist.splice(key,1);
		this.setState({
			course_group_publish_times:newlist
		})
	}

	addgrouppublish=()=>{
		let newlist=this.state.course_group_publish_times;
		newlist.push(  {
			course_group_id : undefined,
			publish_time :undefined
		})
		this.setState({
			course_group_publish_times:newlist
		})
	}

	render(){
		let {settextarea,newfileListtype,descriptiontype,
			course_group_publish_timestype,
			Modalstopval,
			ModalCancel,
			ModalSave,
			loadtype,
			is_unified_setting,
			is_public,
			datatime,
			course_group_publish_times,
			course_groups
		}=this.state;

		const uploadProps = {
			width: 600,
			// showUploadList:false,
			action: `${getUrl()}/api/attachments.json`,
			onChange: this.handleChange,
			onRemove: this.onAttachmentRemove,
			beforeUpload: (file) => {
				// console.log('beforeUpload', file.name);
				const isLt150M = file.size / 1024 / 1024 < 150;
				if (!isLt150M) {
					this.props.showNotification('文件大小必须小于150MB!');
				}
				return isLt150M;
			},
		};

		return(
			<div>
				{/*提示*/}
				<Modals
					modalsType={this.state.Modalstype}
					modalsTopval={this.state.Modalstopval}
					modalCancel={this.state.ModalCancel}
					modalSave={this.state.ModalSave}
					loadtype= {this.state.loadtype}

				/>

				<Modal
					keyboard={false}
					className={"HomeworkModal"}
					title={this.props.modalname}
					visible={this.props.visible}
					closable={false}
					footer={null}
					destroyOnClose={true}
				>
					<div className="task-popup-content">
						<p className="task-popup-text-center font-16">

							<span className={"color-blue underline"}> </span>
						</p>

						<style>{`
                .uploadBtn.ant-btn {
                  border: none;
                  color: #4CACFF;
                  box-shadow: none;
                  background: transparent;
                  border:1px solid #4CACFF;
                  padding-left: 6px;
                  margin-right: 5px;
                }
                .ant-upload-list-item:hover .ant-upload-list-item-info{
                  background-color:#fff;
                }
                .upload_1 .ant-upload-list {
                  width: 350px;
                }
                .ant-upload-select{
                  float: left;
                }

          			.winth540{
          			    width: 540px;
										height: 34px;
								}

              `}</style>


						{		this.state.fileListtype===true?"":<style>{`
						      .ant-upload-list :nth-child(1).ant-upload-list-item {
                 margin-top:31px;
                }
						`}</style>}
						<p className={"winth540"}>


							{
								this.state.fileListtype===true?
									<div>
										<Tooltip placement="bottom" title={
											<pre>
												 	 	每次只能上传一个资源，<br/>删除下面资源可重新上传
											 </pre>
										}>
											<Button className="uploadBtns color-grey-c">
												选择文件
											</Button>
										</Tooltip>

										<span className={"ml10"}>(单个文件最大150M)</span>
									</div>
									:""
							}
							<Upload {...uploadProps} fileList={this.state.fileList} className="upload_1">
								{this.state.fileListtype===false?
									<span>
								   	<Button className="uploadBtn">
											<Icon type="upload" /> 选择文件
										</Button>
											<span className={"ml10"}>(单个文件最大150M)</span>
									</span>:""}
							</Upload>
						</p>

						{/*<style>*/}
						{/*{*/}
						{/*`*/}
						{/*.maxwidth400{*/}
						{/*max-width: 400px;*/}
						{/*overflow: hidden;*/}
						{/*text-overflow: ellipsis;*/}
						{/*white-space: nowrap;*/}
						{/*}*/}
						{/*`*/}
						{/*}*/}
						{/*</style>*/}
						{/*{this.state.fileList.length===0?"":this.state.fileList.map((item,key)=>{*/}
						{/*debugger*/}
						{/*return(*/}
						{/*<p className="color-grey mt10" key={key}  >*/}
						{/*<a className="color-grey fl">*/}
						{/*<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>*/}
						{/*</a>*/}
						{/*<span className="mr12 color9B9B maxwidth400 fl" length="58">*/}
						{/*{item.name}*/}
						{/*</span>*/}
						{/*<span className="color656565 mt2 color-grey-6 font-12 mr8">*/}
						{/*{item.response===undefined?"":isNaN(bytesToSize(item.filesize))?"":bytesToSize(item.filesize)}*/}
						{/*</span>*/}
						{/*<i className="font-14 iconfont  icon-guanbi "*/}
						{/*id={item.response===undefined?"":item.response.id}*/}
						{/*aria-hidden="true" onClick={()=>this.onAttachmentRemove(item.response===undefined?"":item.response.id&&item.response.id)}></i>*/}
						{/*</p>*/}
						{/*)*/}
						{/*})}*/}

						{newfileListtype===true&&this.state.fileListtype===false?<p className={"color-red"}>请先上传资源</p>:""}

						<p className={this.state.fileListtype===true?"mt25":""}>
							<style>{`
                .ant-checkbox-wrapper{
                  margin-left:0px !important;
                  margin-top:10px;
                }
              `}</style>

							{/*<div className={this.state.fileListtype===true?"mt30":""}></div><Checkbox checked={is_public} onChange={this.onChangepublic}>*/}
							{/*<span className={"font-14"}>勾选后所有用户可见，否则仅课堂成员可见</span>*/}
						{/*</Checkbox>*/}

							{this.state.course_groups_count&&this.state.course_groups_count>0?<Checkbox  checked={is_unified_setting} onChange={this.onChangesetting}>
							<span>统一设置</span><span className={"font-14 color-grey-9"}>(选中则所有分班使用相同的发布设置，否则各个单独设置)</span>
							</Checkbox>:""}
							<style>{`
                .Selectleft20{
                   margin-left: 20px !important;
                   width: 176px;
                   height: 40px;
                }
               #startimes .ant-calendar-picker-icon{
                  margin-top:-11px;
                }
                .resourcebox{
                   max-height:150px;
                    overflow: auto;
                }
              `}</style>
							<div className={"resourcebox"}>
								{is_unified_setting===false?
									course_group_publish_times.map((item,key)=>{
										return(
											<div className={"mt10"} key={key}>

												<Select  placeholder="请选择分班名称"
																 value={item.course_group_id}
																 style={{ width: 200 }}
																 onChange={(e,index)=>this.selectassigngroups(e,index,key)}
												>
													{course_groups&&course_groups.map((item,key)=>{
														return(
															<Option value={item.id} key={key}>{item.name}</Option>
														)
													})}
												</Select>

												<DatePicker
													dropdownClassName="hideDisable"
													showTime={{ format: 'HH:mm' }}
													locale={locale}
													showToday={false}
													format={dateFormat}
													placeholder="请选择发布时间"
													id={"startimes"}
													className={"Selectleft20  "}
													width={"200px"}
													value={item.publish_time===undefined||item.publish_time===""?undefined:moment(item.publish_time, dateFormat)}
													onChange={(e,index)=>this.onChangeTimepublish(e,index,key,2)}
													// onChange={ this.onChangeTimepublish }
													disabledTime={disabledDateTime}
													disabledDate={disabledDate}
												/>
												{key!=0?<i className="iconfont icon-shanchu color-grey-c font-14 font-n ml20" onClick={()=>this.deletegrouppublish(key)}></i>:""}
												{key===course_group_publish_times.length-1&&key<this.state.course_groups_count-1?<i className="iconfont icon-tianjiafangda color-green ml15" onClick={this.addgrouppublish}></i>:""}
											</div>
										)
									})

									:""}
							</div>

						</p>

						{is_unified_setting===true?<p className={"mt10"}>
              <span>
                 <DatePicker
									 dropdownClassName="hideDisable"
									 showTime={{ format: 'HH:mm' }}
									 locale={locale}
									 format={dateFormat}
									 placeholder="请选择发布时间"
									 id={"startime"}
									 showToday={false}
									 width={"210px"}
									 value={datatime===undefined||datatime===""?undefined:moment(datatime, dateFormat)}
									 onChange={(e,index)=>this.onChangeTimepublish(e,index,undefined,1)}
									 disabledTime={disabledDateTime}
									 disabledDate={disabledDate}
								 />
              </span>
						</p>:""}

						{/*{course_group_publish_timestype===true?<p className={"color-red mt10"}>请填写完整</p>:""}*/}
						<textarea  placeholder="请在此输入资源描述，最大限制100个字符" className={"mt10"} value={this.state.description} onInput={this.settextarea} style={{
							width: '100%',
							height:'120px',
							border:'1px solid rgba(234,234,234,1)',
							padding: '10px'
						}}></textarea>
						{descriptiontype===true?<p className={"color-red"}>请输入资源描述，最大限制100个字符</p>:""}
						<div className="clearfix mt30 edu-txt-center mb10">
							<a  className="task-btn color-white mr70" onClick={this.props.Cancel}>{this.props.Cancelname}</a>
							<a className="task-btn task-btn-orange" onClick={()=>this.Saves()}>{this.props.Savesname}</a>
						</div>

					</div>
				</Modal>
			</div>
		)
	}
}
export default Sendresource;