import React,{ Component } from "react";
import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd";
import axios from 'axios'
import '../css/busyWork.css'
import '../css/Courses.css'
import { WordsBtn, getUrl, ConditionToolTip, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 'educoder'
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
import CBreadcrumb from '../common/CBreadcrumb'

const confirm = Modal.confirm;
const $ = window.$
const MAX_TITLE_LENGTH = 60;
class NewWork extends Component{
  constructor(props){
    super(props);
    this.contentMdRef = React.createRef();
    this.answerMdRef = React.createRef();
    
    this.state={
      title_value:"",
      title_num: 0,
      contentFileList: [],
      answerFileList: [],
      workLoaded: false,
      base_on_project: true,
      category: {},
      min_num: 2,
      max_num: 10,
    }
  }
  componentDidMount () {
    let {typeId, coursesId, pageType, workId}=this.props.match.params;           
    const isEdit = pageType === "edit"
    this.isEdit = isEdit;
    if (isEdit) {
      this.fetchWork(workId)
    } else {
      this.fetchCourseData(coursesId)
    }
  }
  fetchCourseData = (courseId) => {
    const isGroup = this.props.isGroup()
    const url = `/courses/${courseId}/homework_commons/new.json?type=${isGroup ? 3 : 1}`
    axios.get(url, {
    })
    .then((response) => {
      if (response.data.course_name) {
        const data = response.data;
        this.setState({
          course_id: data.course_id,
          course_name: data.course_name,
          category: data.category,

        })
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  fetchWork = (workId) => {
    const url = `/homework_commons/${workId}/edit.json`
    axios.get(url, {
    })
    .then((response) => {
      if (response.data.name) {
        const data = response.data;
        
        const contentFileList = data.attachments.map(item => {
          return {
            id: item.id,
            uid: item.id,
            name: appendFileSizeToUploadFile(item),
            url: item.url,
            filesize: item.filesize,
            status: 'done'
          }
        })
        const answerFileList = data.ref_attachments.map(item => {
          return {
            id: item.id,
            uid: item.id,
            name: appendFileSizeToUploadFile(item),
            url: item.url,
            filesize: item.filesize,
            status: 'done'
          }
        })

        this.setState({
          ...data,
          // course_id: data.course_id,
          // course_name: data.course_name,
          // category: data.category,
          title_num: parseInt(data.name.length),
          workLoaded: true,
          init_min_num: data.min_num,
          init_max_num: data.max_num,
          // description: data.description,
          reference_answer: data.reference_answer,
          contentFileList,
          answerFileList,
        }, () => {
          setTimeout(() => {
            this.contentMdRef.current.setValue(data.description || '')
            this.answerMdRef.current.setValue(data.reference_answer || '')
          
          }, 2000)
          
          this.props.form.setFieldsValue({
            title: data.name,
            description: data.description || '',
            reference_answer: data.reference_answer || '',
          });
          
        })

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

  // 输入title
  changeTitle=(e)=>{
    console.log(e.target.value.length);
    this.setState({
      title_num: parseInt(e.target.value.length)
    })
  }
  handleSubmit = () => {
    const courseId = this.state.course_id || this.props.match.params.coursesId ;
    
    this.props.form.validateFieldsAndScroll((err, values) => {
      console.log(values)
      const mdContnet = this.contentMdRef.current.getValue().trim();
      console.log(mdContnet)
      values.description = mdContnet;
      // return;
      
      {/* max={has_commit ? init_min_num : null } */}
      {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
      // 已有提交作品，人数范围只能扩大
      const { has_commit, max_num, init_max_num, min_num, init_min_num } = this.state;
      if (has_commit) {
        if (max_num < init_max_num || min_num > init_min_num) {
          this.props.showNotification(`已有提交作品，人数范围只能扩大(原设置为：${init_min_num} - ${init_max_num})`)
          return;
        }
      }

      // const errKeys = Object.keys(err);  // || errKeys.length == 1 && errKeys[0] == 'content' && mdContnet
      if (!err) {
        if (this.isEdit) {
          this.doEdit(courseId, values)
        } else {
          this.doNew(courseId, values)
        }
       
      } else {
        $("html").animate({ scrollTop: $('html').scrollTop() - 100 })
      }
    })
  }
  doEdit = (courseId, values) => {
    const workId = this.props.match.params.workId
    const newUrl = `/homework_commons/${workId}.json`

    let attachment_ids = this.state.contentFileList.map(item => {
      return item.response ? item.response.id : item.id
    })
    let reference_attachment_ids = this.state.answerFileList.map(item => {
      return item.response ? item.response.id : item.id
    })

    const { min_num, max_num, base_on_project, category } = this.state
    const isGroup = this.props.isGroup()
    axios.put(newUrl, {
      type: isGroup ? 3 : 1,
      name: values.title,
      description: values.description,
      reference_answer: values.reference_answer, 
      attachment_ids,
      reference_attachment_ids,

      min_num,
      max_num,
      base_on_project
    })
    .then((response) => {
      if (response.data.status == 0) {
        this.props.showNotification('保存成功')
        this.props.toWorkListPage(this.props.match.params, workId)
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  doNew = (courseId, values) => {
    const newUrl = `/courses/${courseId}/homework_commons.json`

    let attachment_ids = this.state.contentFileList.map(item => {
      return item.response ? item.response.id : item.id
    })
    let reference_attachment_ids = this.state.answerFileList.map(item => {
      return item.response ? item.response.id : item.id
    })
    const isGroup = this.props.isGroup()
    const { min_num, max_num, base_on_project, category } = this.state
    
    axios.post(newUrl, {
      type: isGroup ? 3 : 1,
      name: values.title,
      description: values.description,
      reference_answer: values.reference_answer, 
      attachment_ids,
      reference_attachment_ids,

      min_num,
      max_num,
      base_on_project
    })
    .then((response) => {
      if (response.data.status == 0) {
        this.props.showNotification('保存成功')
        this.props.toWorkListPage(this.props.match.params, response.data.homework_id)
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  handleContentUploadChange = (info) => {
    let contentFileList = info.fileList;
    this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
  }
  handleAnswerUploadChange = (info) => {
    let answerFileList = info.fileList;
    this.setState({ answerFileList: appendFileSizeToUploadFileAll(answerFileList) });
  }
  
  onAttachmentRemove = (file, stateName) => {
    this.props.confirm({
      content: '是否确认删除?',
      
      onOk: () => {
        this.deleteAttachment(file, stateName)
      },
      onCancel() {
        console.log('Cancel');
      },
    });

    
    return false;
  }
  deleteAttachment = (file, stateName) => {
    // 初次上传不能直接取uid
    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) {
            console.log('--- success')
            
            this.setState((state) => {
              const index = state[stateName].indexOf(file);
              const newFileList = state[stateName].slice();
              newFileList.splice(index, 1);
              return {
                [stateName]: newFileList,
              };
            });
          }
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  max_num_change = (val) => {
    if (val < 2) {
      this.setState({ 
        max_num: 2,
      })
      return;
    }
    const { min_num } = this.state;
    this.setState({ 
      max_num: val,
      min_num: val <= min_num ? val - 1 : min_num
    })
  }
  min_num_change = (val) => {
    this.setState({ min_num: val })
  }
  base_on_project_change = () => {
    this.setState({ base_on_project: !this.state.base_on_project })
  }

  render(){
    let {typeId,coursesId,pageType}=this.props.match.params;
    const { getFieldDecorator } = this.props.form;
    const isGroup = this.props.isGroup()
    const moduleName = !isGroup? "普通作业":"分组作业";
    const moduleEngName = this.props.getModuleName()
    let{
      title_value, contentFileList, answerFileList, max_num, min_num, base_on_project,
      init_max_num, init_min_num,
      title_num, course_name, category, has_commit, has_project
    }=this.state
    const { current_user } = this.props

    const courseId = this.state.course_id || this.props.match.params.coursesId ;    
    const isEdit = this.isEdit;
    if ((isEdit == undefined ||  isEdit) && !this.state.workLoaded) {
      return ''
    } 
    const uploadProps = {
      width: 600,
      fileList: contentFileList,
      multiple: true,
      // https://github.com/ant-design/ant-design/issues/15505
      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
      // showUploadList: false,
      action: `${getUrl()}/api/attachments.json`,
      onChange: this.handleContentUploadChange,
      onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
      beforeUpload: (file) => {
        console.log('beforeUpload', file.name);
        const isLt150M = file.size / 1024 / 1024 < 150;
        if (!isLt150M) {
          message.error('文件大小必须小于150MB!');
        }
        return isLt150M;
      },
    };
    const answerUploadProps = {
      width: 600,
      fileList: answerFileList,
      multiple: true,
      // https://github.com/ant-design/ant-design/issues/15505
      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
      // showUploadList: false,
      action: `${getUrl()}/api/attachments.json`,
      onChange: this.handleAnswerUploadChange,
      onRemove: (file) => this.onAttachmentRemove(file, 'answerFileList'),
      beforeUpload: (file) => {
        console.log('beforeUpload', file.name);
        const isLt150M = file.size / 1024 / 1024 < 150;
        if (!isLt150M) {
          message.error('文件大小必须小于150MB!');
        }
        return isLt150M;
      },
    };

    return(
      <div className="newMain">
        <div className="educontent mt20 mb50">
          {/* <p className="clearfix">
            <WordsBtn style="grey" className="fl">{course_name}</WordsBtn>
            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
            <WordsBtn style="grey" className="fl">{typeId==1 ?"普通作业":"分组作业"}</WordsBtn>
            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
            <span>{pageType==="new"?"新建":"编辑"}</span>
          </p> */}
          <CBreadcrumb items={[
            { to: current_user && current_user.first_category_url, name: this.state.course_name},
            { to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
              , name: category && category.category_name },
            { name: `${ this.isEdit ? '编辑' : '新建'}` }
          ]}></CBreadcrumb>
          
          <p className="clearfix mt20 mb20">
            <span className="fl font-24 color-grey-3">{this.isEdit ?"编辑":"新建"}{ moduleName }</span>
            {/* history.goBack() 
                this.props.toListPage(this.props.match.params, category.category_id)}
            */}
            <a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2" 
                onClick={() => this.props.history.goBack()}>
              返回
            </a>
          </p>
          <div>
            {/* onSubmit={this.handleSubmit} */}
            <Form className="courseForm">
              <Form.Item
                label="标题"
                className="AboutInputForm"
              > 
              {getFieldDecorator('title', {
                  rules: [{
                    required: true, message: '请输入标题'
                  }],
                })(
                  <Input placeholder="请输入作业标题，最大限制60个字符" onInput={this.changeTitle} className="searchView searchViewAfter" style={{"width":"100%"}} maxLength={MAX_TITLE_LENGTH} addonAfter={`${String(title_num)}/${MAX_TITLE_LENGTH}`}/>
                )}
              </Form.Item>
              <style>{`
                .uploadBtn.ant-btn {
                  border: none;
                  color: #4CACFF;
                  box-shadow: none;
                  background: transparent;
                  padding: 0 6px;
                }
                .ant-upload-list-item:hover .ant-upload-list-item-info{
                  background-color:#fff;
                }
                .upload_1 .ant-upload-list {
                  width: 350px;
                }
                
                .ant-input-number {
                  height: 40px;
                  line-height: 40px;
                }

                .workContent.AboutInputForm.ant-form-item {
                  border-bottom: none;
                  padding-bottom: 0px !important;
                }
                .newWorkUpload {
                  padding: 0px 30px 30px 30px!important;
                  background: #fff;
                  width: 100%;
                  display: inline-block;
                  border-bottom: 1px solid #EDEDED;
                }
                
              `}</style>


              {  <Form.Item
                label="内容"
                className="AboutInputForm workContent mdInForm"
              > 
                {getFieldDecorator('description', {
                  rules: [{
                    required: true, message: '请输入作业内容和要求'
                  }],
                })(
                  <TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入作业内容和要求,最大限制5000个字符" mdID={'courseContentMD'} refreshTimeout={1500} 
                    className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
                )}
              </Form.Item> }
              <Upload {...uploadProps} className="upload_1 newWorkUpload">
                <Button className="uploadBtn">
                  <Icon type="upload" /> 上传附件
                </Button>
                (单个文件150M以内)
              </Upload>
              

              { isGroup && 
                <Form.Item
                  label="分组设置"
                  className="AboutInputForm"
                > 
                {getFieldDecorator('personNum', {
                    rules: [{
                      required: false
                      // required: true, message: '请输入最小人数和最大人数'
                    }],
                  })(
                    <div>
                      <p className="clearfix">
                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
                        {/* max={has_commit ? init_min_num : null } */}
                          <InputNumber placeholder="请填写每组最小人数" min={1} className="winput-240-40" value={min_num} 
                              
                              onChange={this.min_num_change} style={{width:'180px'}} />
                        </ConditionToolTip>
                        
                        <span className="ml15 mr15">~</span>
                        {/* min={has_commit ? init_max_num : (min_num == undefined ? 2 : min_num + 1) }  */}
                        <ConditionToolTip condition={has_commit} title={'已有提交作品，人数范围只能扩大'}>
                          <InputNumber className="winput-240-40" placeholder="请填写每组最大人数" value={max_num} max={10}
                              onChange={this.max_num_change} style={{width:'180px'}} />
                        </ConditionToolTip>
                        <label className="color-grey-9 ml20 font-14">（项目管理员角色的成员都可以提交作品，提交作品时需要关联同组成员，组内成员作品共享）</label>
                      </p>
                      <p className="mt20">
                        <ConditionToolTip condition={has_commit || has_project} title={'已有关联项目或作品，不能修改'}>
                          <Checkbox checked={base_on_project} onChange={this.base_on_project_change}
                              disabled={has_project || has_commit}
                          >基于项目实施</Checkbox>
                        </ConditionToolTip>
                        
                        <label className="color-grey-9 ml12 font-14">（勾选后各小组必须在educoder平台创建项目，教师可随时观察平台对各小组最新进展的实时统计）</label>
                      </p>
                    </div>
                  )}
                </Form.Item>
              }
              <Form.Item
                label="参考答案"
                className="AboutInputForm"
                style={{"borderBottom":"none"}}
              > 
                {getFieldDecorator('reference_answer', {
                  rules: [{
                    required: false
                  }],
                })(
                  <TPMMDEditor ref={this.answerMdRef} placeholder="请在此输入作业的参考答案,最大限制5000个字符" mdID={'workAnswerMD'} 
                      className="courseMessageMD" refreshTimeout={1500} initValue={this.state.reference_answer || ''}></TPMMDEditor>
                )}
                <Upload {...answerUploadProps} className="upload_1">
                  <Button className="uploadBtn">
                    <Icon type="upload" /> 上传附件
                  </Button>
                  (单个文件150M以内)
                </Upload>
              </Form.Item>
              <Form.Item>
                <div className="clearfix mt30 mb30">
                {/*  htmlType="submit"   */}
                  <Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
                  <a className="defalutCancelbtn fl" onClick={() => this.props.toListPage(this.props.match.params, category.category_id)}>取消</ a>
                </div>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}
const WrappedBoardsNew = Form.create({ name: 'NewWork' })(NewWork);
export default WrappedBoardsNew;