import React,{ Component } from "react";
import { Modal,Checkbox,Select,Input,Upload,Button,Icon,message,DatePicker,Tooltip} from "antd";
import axios from'axios';
import {getUrl,handleDateString,appendFileSizeToUploadFileAll} from 'educoder';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Modals from '../../modals/Modals';

const Option = Select.Option;
 
const dateFormat ="YYYY-MM-DD HH:mm"
function range(start, end) {
	const result = [];
	for (let i = start; i < end; i++) {
		result.push(i);
	}
	return result;
}
function disabledDateTime() {
	return {
		disabledMinutes: () => range(1, 30).concat(range(31, 60)),
		// disabledSeconds: () => range(1,60)
	}
}
class Selectsetting extends Component{
	constructor(props){
		super(props);
		this.state={
			description:undefined,
			datalist:undefined,
			course_groups:undefined,
			attachment_histories:undefined,
			datatime:undefined,
			unified_setting:true,
			fileList:[],
			fileListtype:false
		}
	}


	componentDidMount() {
		let {discussMessageid} =this.props;
		let course_id=this.props.course_id;
		let url="/files/"+discussMessageid+".json";
		axios.get(url, {
				params:{
					course_id:course_id,
				}
			})
			.then((response) => {
				if(response.status===200){

					let newcourse_groups=[];
					let list =response.data.course_groups;

					// let list=[
					// 		{
					// 			"course_group_id": 820,
					// 			"course_group_name": "示例A班",
					// 			"course_group_publish_time": "2019-04-18T17:00:00.000+08:00"
					// 		},
					// 		{
					// 			"course_group_id": 821,
					// 			"course_group_name": "示例B班",
					// 			"course_group_publish_time": "2019-04-19T19:00:00.000+08:00"
					// 		},
					// 		{
					// 			"course_group_id": 822,
					// 			"course_group_name": "示例C班",
					// 			"course_group_publish_time": "2019-04-10T19:00:00.000+08:00"
					// 		}
					// 	]

					if(list.length!=0){
						list.forEach((item,key)=>{
							newcourse_groups.push	({
								course_group_id:item.course_group_id,
								course_group_name:item.course_group_id,
								publish_time:moment(item.course_group_publish_time).format(dateFormat)
							})
						})
					}else{
						newcourse_groups.push	({
							course_group_id:undefined,
							course_group_name:undefined,
							publish_time:""
						})
					}

					this.setState({
						datalist:response.data,
						description: response.data.description,
						is_public: response.data.is_public,
						unified_setting: response.data.unified_setting,
						datatime:response.data.publish_time,
						// is_public:response.data.course_groups,
						//attachment_histories:response.data.attachment_histories
						course_groups:newcourse_groups
					})

				}
			})
			.catch(function (error) {
				console.log(error);
			});


		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_groupss: response.data.course_groups,
					})
				})
				.catch(function (error) {
					console.log(error);
				});
		}


	}



	 getalldata=()=>{

	}
	componentDidUpdate = (prevProps) => {

		if ( prevProps.visible != this.props.visible ) {
			console.log(prevProps)
			console.log(this.props)
     this.setState({
	     visible:this.props.visible
     })
			this.getalldata()
		}

	}
	onChangepublics=(e)=>{
		console.log(e.target.checked)
		this.setState({
			is_public:e.target.checked
		})

	}

	onChangesettings=(e)=>{
		console.log(e.target.checked)
		this.setState({
			unified_setting:e.target.checked
		})

	}

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


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

	savecouseShixunModal=()=>{
		debugger
		let {fileList,is_public,unified_setting,description,datatime,course_groups}=this.state;

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

		if(description===undefined||description===null){

		}else if(description.length>100){
			this.setState({
				descriptiontypes:true
			})
			return
		}

		// course_groups.forEach((item,key)=>{
		// 	if(item.course_group_id===undefined||item.publish_time===undefined){
		// 		this.setState({
		// 			course_group_publish_timestype:true
		// 		})
		// 		return
		// 	}
		// })

   // if(unified_setting===false){
   //
	//    course_groups.forEach((item,key)=>{
	// 	   if(item.course_group_id===undefined){
	// 		   this.setState({
	// 			   course_group_idtypes:true
	// 		   })
	// 		   return
	// 	   }
	//    })
   //
   // }


		let coursesId=this.props.match.params.coursesId;
		let attachmentId=this.props.match.params.attachmentId;
	  let url="/files/"+this.props.discussMessageid+".json";
		//
		axios.put(url,{
			course_id:coursesId,
			new_attachment_id:newfileList.length===0?undefined:newfileList,
			is_public:is_public,
			is_unified_setting:unified_setting,
			publish_time:unified_setting===true?datatime===undefined?moment(new Date()).format('YYYY-MM-DD HH'):datatime:undefined,
			description:description,
			course_group_publish_times:unified_setting===false?course_groups:undefined
		}).then((result)=>{

			if(result.data.status===0){
				this.props.setupdate(attachmentId)
				this.props.showNotification("设置资源成功");
				this.hidecouseShixunModal()
			}
		})

	}
	onChangeTimepublish= (date, dateString) => {

		// console.log('startValue', dateString);
		this.setState({
			datatime:handleDateString(dateString),
		})

	}

	// 附件相关 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) => {
	// 	// 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) => {

		// const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
	  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:[]
						})
						// this.setState((state) => {
						// 	const index = state.fileList.indexOf(file);
						// 	const newFileList = state.fileList.slice();
						// 	newFileList.splice(index, 1);
						// 	return {
						// 		fileList: newFileList,
						// 	};
						// });
					}
				}
			})
			.catch(function (error) {
				console.log(error);
			});
		this.setState({
			fileListtype:false,
		})
	}

	onChangeTimepublishs= (date, dateString,key) => {
		let {course_groups}=this.state;
		let newgroup_publish=course_groups;
		for(var i=0; i<newgroup_publish.length; i++){
			if(i===parseInt(key)){
				newgroup_publish[i].publish_time=handleDateString(dateString);
			}
		}
		this.setState({
			course_groups:newgroup_publish,
		})
	}


	selectassigngroups=(e,index,key)=>{
		let {course_groups}=this.state;
		let newgroup_publish=course_groups;
		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_groups:newgroup_publish,
		})
	}
	deletegrouppublish=(key)=>{
		let newlist=this.state.course_groups;
		newlist.splice(key,1);
		this.setState({
			course_groups:newlist
		})
	}

	addgrouppublish=()=>{
		let newlist=this.state.course_groups;
		newlist.push(  {
			course_group_id : undefined,
			publish_time :""
				// moment(new Date()).format('YYYY-MM-DD HH:mm')
		})
		this.setState({
			course_groups:newlist
		})
	}
	render(){
		let {is_public,unified_setting,course_groups,datatime,description,datalist,course_group_publish_timestype}=this.state;

		const uploadProps = {
			width: 600,
			// https://github.com/ant-design/ant-design/issues/15505
			// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
		  // 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) {
					message.error('文件大小必须小于150MB!');
				}
				return isLt150M;
			},
		};


		// console.log(this.props.has_course_groups)
		return(
			<div>
				<style>
					{`
					  #startimes .ant-calendar-picker-icon{
					 margin-top:-11px;
					  }
				
				  `}
				</style>
				{/*提示*/}
				<Modals
					modalsType={this.state.Modalstype}
					modalsTopval={this.state.Modalstopval}
					modalCancel={this.state.ModalCancel}
					modalSave={this.state.ModalSave}
					loadtype= {this.state.loadtype}
				/>
				<Modal
					className={"settingmodal"}
					title="资源设置"
					visible={this.props.Settingtype}
					closable={false}
					footer={null}
					width="600px"
					keyboard={false}
					destroyOnClose={true}
				>
					<style>
						{
							`
								.ant-modal-body{
	                  padding: 30px 0px;
								}
							`
						}
					</style>

					<style>{`
                .newupload_conboxtop{
                   margin-top: -30px;
                }
                #shixun_tab_div{
                   padding: 0 30px;
                   padding-top:30px;
                }
              `}</style>

					<div className="newupload_conbox newupload_conboxtop">

						<style>{`
                .greybackHead{
                  padding:0px 30px;
                }
                .fontlefts{text-align: left; text-align: center;}
              `}</style>
						<ul className="clearfix greybackHead edu-txt-center">
							<li className="fl paddingleft22 fontlefts" style={{width:'220px'}}>资源名称</li>
							<li className="fl edu-txt-left" style={{width:'80px'}}>下载</li>
							<li className="fl" style={{width:'100px'}}>引用</li>
							<li className="fl" style={{width:'130px'}}>版本号</li>
						</ul>



						<div className="pl20 pr20"
						     style={{"Height":"204px"}}>

							<style>{`
                   .color-grey-9a{color: #9A9A9A !important;}
                   .datastyle{
                      width: 120px;
									    overflow: hidden;
									    height: 37px;
                   }
                  .isabox{
							        max-width: 173px;
									    overflow: hidden;
									    text-overflow: ellipsis;
									    white-space: nowrap;
									    display: inline-block;
									    float: left;
							     }
                `}</style>
							<div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE">
								<li className="fl" style={{width: '241px'}}>
									<span className={"isabox"} title={datalist&&datalist.title}> {datalist&&datalist.title} </span>
									{datalist&&datalist.attachment_histories.length===0?"":<span className={"newcolor-orange fl"}>当前版本</span>}
								</li>
								<li className="fl edu-txt-left task-hide paddingl5 "
								    style={{width: '76px'}}> {datalist&&datalist.downloads_count} </li>
								<li className="fl paddingl10 " style={{width: '100px'}}> {datalist&&datalist.quotes} </li>
								<li className="fl paddingl10 datastyle">
									{moment(datalist&&datalist.created_on).format('YYYY-MM-DD HH:mm')==="Invalid date"?"":moment(datalist&&datalist.created_on).format('YYYY-MM-DD HH:mm')}
								</li>
							</div>

							{datalist&&datalist.attachment_histories.map((item,key)=>{
						     	return(
							      <div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE" key={key}>
								      <li className="fl" style={{width: '241px'}}>
									      <span className={"isabox"} title={item.title}> {item.title} </span>
									      {/*<span className={"newcolor-orange fl"}>当前版本</span>*/}
								      </li>
								      <li className="fl edu-txt-left task-hide paddingl5 "
								          style={{width: '76px'}}> {item.downloads_count} </li>
								      <li className="fl paddingl10 " style={{width: '100px'}}> {item.quotes} </li>
								      <li className="fl paddingl10 datastyle">
									      {moment(item.created_on).format('YYYY-MM-DD HH:mm')==="Invalid date"?"":moment(item.created_on).format('YYYY-MM-DD HH:mm')}
								      </li>
							      </div>
									)
								})}
						</div>
						<style>{`
                   .popups{
												padding-left: 20px;
												padding-right: 20px;
										    padding-top: 20px;
                   }
                `}</style>
						<div className="popups">
							<p className="task-popup-text-center font-16">

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

							<style>{`
		                .uploadBtn.ant-btn {
		                  border: 1px solid #4CACFF;
                      margin-right: 15px;
		                  color: #4CACFF;
		                  box-shadow: none;
		                  background: transparent;
		                  padding: 0 6px;
		                  height: 25px;
                      line-height: 25px;
		                }
		                .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;
		                }

		                .uploadBtns.ant-btn{
											border: 1px solid #ccc;
											margin-right: 15px;
											color: #ccc;
											box-shadow: none;
											background: transparent;
											padding: 0 6px;
											height: 25px;
											line-height: 25px;
		                }
		                .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">
												 更新版本
											 </Button>
										 </Tooltip>

										 <span>(单个文件最大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>(单个文件最大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)=>{*/}
								{/*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))?"123":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>*/}
								{/*)*/}
							{/*})}*/}

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

							<p className={"winth540"}>
								<style>{`
                .ant-checkbox-wrapper{
                  margin-left:0px !important;
                  margin-top:10px;
                }
              `}</style>

								<div className={this.state.fileListtype===true?"mt30":""}>
									<Checkbox
										checked={is_public}
										onChange={this.onChangepublics}>
										<span className={"font-14"}>勾选后所有用户可见，否则仅课堂成员可见</span>
									</Checkbox>
								</div>
								{/*{this.props.has_course_groups&&this.props.has_course_groups===true?:""}*/}
								{/*{this.state.course_groupss&&this.state.course_groupss.length>0?<Checkbox*/}
									{/*checked={unified_setting}*/}
									{/*onChange={this.onChangesettings}>*/}
									{/*<span>统一设置</span><span className={"font-14 color-grey-9"}>(选中则所有分班使用相同的发布设置，否则各个单独设置)</span>*/}
								{/*</Checkbox>:""}*/}

								<style>
									{`
								    .Selectleft20{
									   margin-left: 20px !important;
									   width: 176px;
									   height: 40px;  
									}
						 			 .resourcebox{
	                   max-height:150px;
	                   overflow: auto;
                    }
								  `}
								</style>


								{/*this.props.has_course_groups&&this.props.has_course_groups===true?:""*/}
								<div className={"resourcebox"}>
									{unified_setting===false?
										this.state.course_groups&&this.state.course_groups.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)}
													>
														{	this.state.course_groupss&&this.state.course_groupss.map((item,key)=>{
															return(
																<Option value={item.id} key={key}>{item.name}</Option>
															)
														})}
													</Select>


													<DatePicker
														showToday={false}
														dropdownClassName="hideDisable"
														showTime={{ format: 'HH:mm' }}
														format="YYYY-MM-DD HH:mm"
														locale={locale}
														placeholder="请选择发布时间"
														id={"startimes"}
														className={"Selectleft20"}
														width={"200px"}
														value={item.publish_time===undefined||item.publish_time===""?"":item.publish_time===null?"":moment(item.publish_time, dateFormat)}
														onChange={(e,index)=>this.onChangeTimepublishs(e,index,key)}
														// onChange={ this.onChangeTimepublish }
														disabledTime={disabledDateTime}
													/>

													{key!=0?<i className="iconfont icon-shanchu color-grey-c font-14 font-n ml20" onClick={()=>this.deletegrouppublish(key)}></i>:""}
													{key===course_groups.length-1?<i className="iconfont icon-tianjiafangda color-green ml15" onClick={this.addgrouppublish}></i>:""}
												</div>
											)
										}):""}
								</div>

							</p>
							<style>
								{`
							  #startime .ant-calendar-picker-icon{
							 margin-top:-6px;
							  }
						  `}
							</style>
							{unified_setting===true?
								<p className={"mt10"}>
			              <span>
			                 <DatePicker
								 showToday={false}
				                 dropdownClassName="hideDisable"
				                 showTime={{ format: 'HH:mm' }}
				                 format="YYYY-MM-DD HH:mm"
				                 locale={locale}
				                 placeholder="请选择发布时间"
				                 id={"startime"}
				                 width={"210px"}
				                 value={datatime===undefined||datatime===""?"":moment(datatime, dateFormat)}
				                 onChange={this.onChangeTimepublish}
				                 disabledTime={disabledDateTime}

			                 />
			              </span>
								</p>:""}
							{/*{this.state.course_group_idtypes===true?<p className={"color-red"}>请选择分班</p>:""}*/}

							{/*{course_group_publish_timestype===true?<p className={"color-red mt10"}>请填写完整</p>:""}*/}
							<textarea  placeholder="请输入资源描述，最大限制100个字符" className={"mt10"} value={description} onInput={this.settextarea} style={{
								width: '100%',
								height:'120px',
								border:'1px solid rgba(234,234,234,1)',
								padding: '10px'
							}}></textarea>
							{this.state.descriptiontypes===true?<p className={"color-red"}>描述不能超过最大限制：100个字符</p>:""}
						</div>

						<div className="mt20 marginauto clearfix edu-txt-center">
							<a className="pop_close task-btn mr30 margin-tp26" onClick={this.hidecouseShixunModal}>取消</a>
							<a className="task-btn task-btn-orange margin-tp26" id="submit_send_shixun" onClick={this.savecouseShixunModal}>确定</a>
						</div>
					</div>

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