import React , { forwardRef , useState } from 'react';
import { Form , Input , Button } from 'antd';
import MDEditor from "../../../modules/tpm/challengesnew/tpm-md-editor";
import Upload from "../../Upload/Index";
import Attachments from "../../Upload/attachment";
import UploadImg from '../Img/UploadImg.png';

function NewPanel(props,ref){
  const [ description , setDescription ] = useState(undefined);
  const [ fileList , setFileList] = useState(undefined);
  const [ attachments , setAttachments ] = useState([]);
  const [ save , setSave ] = useState([]);
  const [ receivers_login , setReceiversLogin ] = useState(undefined);

  const { createFunc , title , desc , files , onCancel , owner , projectsId } = props;

  const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
  useState(()=>{
    title && setTimeout(()=>{
      setFieldsValue({subject:title});
      desc && onContentChange(desc);
    },100)
    files && setAttachments(files);
    files && setSave(files);
  },[title , desc , files])

  function onContentChange(value){
    setDescription(value);
  }
  function UploadFunc(f){
    let list = [];
    let arr = [];
    if(save && save.length>0 ){
      arr = save.map(i=>{return i.id});
    }
    list = arr && arr.length>0 ? f.concat(arr) : f ;
    setFileList(list);
  };

  function deleteLoad(id){
    let arr = [];
    let list = save;
    if(list && list.length>0 ){
      arr = list.filter(i=>i.id !== id);
    }
    setFileList(arr.map(i=>{return i.id}));
    setSave(arr);
  }

  function changeAtWhoLoginList(loginList){
    let list = new Set(receivers_login);
    loginList.map(item => list.add(item));
    setReceiversLogin(Array.from(list));
  };

  function sureFunc(){
    validateFields((error,values)=>{
      if (!error) {
        createFunc(values,fileList,receivers_login,description);
      }
    })
  }

  function cancelFunc(){
    if(onCancel){
      onCancel();
    }else{
      window.history.back(-1);
    }
  }
  return(
    <React.Fragment>
      <Form className="explain">
        <Form.Item>
          {getFieldDecorator("subject",{
            rules:[{required:true,message:"请输入疑修标题"}]
          })(
            <Input placeholder="标题" maxLength={100}/>
          )}
        </Form.Item>
      </Form>
      <div style={{position: 'relative'}}>
        <MDEditor
          placeholder={"请输入描述信息"}
          height={392}
          mdID={"issue-edit-description"}
          initValue={description}
          onChange={onContentChange}
          className="mt20"
          isCanAtme = {true}
          isQuoteIssue={true}
          owner = {owner}
          projectsId = {projectsId}
          changeAtWhoLoginList = {changeAtWhoLoginList}
        ></MDEditor>
      </div>
      <div className="pb20">
        <Upload
          className="commentStyle mt20"
          isComplete={true}
          load={UploadFunc}
          icon={
            <img
              src={UploadImg}
              width="58"
              alt=""
              style={{ marginBottom: 15 }}
            />
          }
          size={100}
          showNotification={props.showNotification}
        />
        {attachments && attachments.length > 0 &&
          <Attachments
            attachments={attachments}
            showNotification={props.showNotification}
            canDelete={true}
            deleteLoad={deleteLoad}
          ></Attachments>
        }
      </div>
      <div style={{display:"flex"}}>
        <Button type="primary" className="operateButton" style={{width:"100px"}} onClick={sureFunc}>{ title ? "保存" :"创建"}</Button>
        <Button className="ml30" style={{width:"100px"}} onClick={cancelFunc}>取消</Button>
      </div>
    </React.Fragment>
  )
}
export default forwardRef(NewPanel);
