import React , { useEffect , useState , forwardRef , useRef } from 'react';
import { Spin , Form , InputNumber, message } from 'antd';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import { Box , LongWidth } from '../../Component/layout';
import RenderHtml from "../../../components/render-html";
import DropMenu from '../Component/dropMenu';
import NewPanel from '../Component/newPanel';
import Attachments from "../../Upload/attachment";
import DelBox from '../Component/delBox';
import Date from '../Component/date';
import moment from 'moment';
import Copy from '../Component/copy';
import axios from 'axios';
import CommentList from '../Component/comments/list';
import Claims from '../../claims/claims';
import ChooseMenu from '../Component/chooseMenu';

function Details(props){
  const owner = props.match.params.owner;
  const projectsId = props.match.params.projectsId;
  const index = props.match.params.index;

  const [ details , setDetails ] = useState(undefined);
  const [ statusList , setStatusList ] = useState([]);
  const [ prioritiesList , setPrioritiesList ] = useState([]);
  const [ chargeList , setChargeList ] = useState([]);
  const [ charge , setCharge ] = useState(undefined);
  const [ millstoneList , setMillstoneList ] = useState([]);
  const [ millstone , setMillstone ] = useState(undefined);
  const [ tagList , setTagList ] = useState(undefined);
  const [ tag , setTag ] = useState(undefined);
  const [ branchList , setBranchList ] = useState(undefined);
  const [ branch , setBranch ] = useState(undefined);
  const [ desc , setDesc ] = useState(undefined);

  const [ orderId , setOrderId ] = useState(undefined);

  const [ delVisible , setDelVisible] = useState(false);
  const [ edit , setEdit] = useState(false);
  const [ copy , setCopy] = useState(false);

  const [ start_date, setStartDate ] = useState("");
  const [ due_date, setDueDate ] = useState("");
  const [ commentReload, setCommentReload] = useState(undefined);
  const [ editFlag , setEditFlag ] = useState(false);
  const [ amountEditFlag , setAmountEditFlag ] = useState(false);

  const [ assigner_choose , setAssigner_choose ] = useState([]);
  const [ prioritie_choose , setPrioritie_choose ] = useState([]);
  const [ status_choose , setStatus_choose ] = useState([]);
  const [ tag_choose , setTag_choose ] = useState([]);
  const [ millstone_choose , setMillstone_choose ] = useState([]);
  const [ branch_choose , setBranch_choose ] = useState([]);
  const [ rewardAmount , setRewardAmount ] = useState(undefined);
  const [ rewardFlag , setRewardFlag ] = useState(false);

  const pathname = props.history.location.pathname;
  const permission = props && props.projectDetail && props.projectDetail.permission;
  let colors = ["#1abcb1","#28be6c","#e67e22","#db3d1d"];

  const {projectDetail , open_blockchain ,current_user } = props;
  useEffect(()=>{
    if(pathname === `/${owner}/${projectsId}/issues/${index}/copy`){
      setEdit(true);
      setCopy(true);
    }else{
      setEdit(false);
      setCopy(false);
    }
  },[pathname])

  useEffect(()=>{
    if(projectDetail && details){
      const { author, name} = projectDetail;
      document.title = `${details.subject}-疑修-${author.name}/${name}`;
    }
  },[details,projectDetail])

  useEffect(()=>{
    if(index){
      Init();
    }
  },[index])

  function Init(){
    const url = `/v1/${owner}/${projectsId}/issues/${index}`;
    axios.get(url).then(result=>{
      if(result && result.data){
        let data = result.data;
        setDetails(data);
        let per = data && !data.user_permission;
        setEditFlag(per);

        setDesc(data && data.description);

        const aut = current_user && data.author && (data.author.login === current_user.login);
        const con = data.pull_fixed === false && aut;
        setAmountEditFlag(con);

        setAssigner_choose(data.assigners);
        if(data.priority && data.priority.id){
          setPrioritie_choose([{...data.priority,color:colors[data.priority.id-1]}]);
        }else{
          setPrioritie_choose([]);
        }
        setStatus_choose(data.status && data.status.id ? [data.status]:[]);
        setTag_choose(data.tags);
        setMillstone_choose(data.milestone && data.milestone.id ? [data.milestone]:[]);
        setBranch_choose(data.branch_name ? [{name:data.branch_name}] : []);
        setRewardAmount(data.blockchain_token_num);

        data.start_date && setStartDate(moment(data.start_date).format('YYYY-MM-DD'));
        data.due_date && setDueDate(moment(data.due_date).format('YYYY-MM-DD'));

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


  function statusTag(name){
    switch (name) {
      case "低":
        return "status low";
      case "正常":
        return "status normals";
      case "高":
        return "status hight";
     default:
        return "status urgent";
    }
  }
  // 获取状态列表
  useEffect(()=>{
    getStatus();
  },[])
  function getStatus(){
    const url = `/v1/${owner}/${projectsId}/issue_statues`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setStatusList(result.data.statues);
      }
    })
  }
  // 获取优先级列表
  useEffect(()=>{
    getPriorities();
  },[])

  function getPriorities(){
    const url = `/v1/${owner}/${projectsId}/issue_priorities`;
    axios.get(url).then(result=>{
      if(result && result.data){
        let priorities = result.data.priorities;
        let array = addColorForPriorities(priorities);
        setPrioritiesList(array);
      }
    })
  }

  function addColorForPriorities(list){
    let array =[];
    if(list && list.length>0){
      array = list.map((i,k)=>{
        let arr = {...i,color:colors[k]}
        return arr;
      })
    }
    return array;
  }

  // 获取负责人列表
  useEffect(()=>{
    getCharge();
  },[charge])

  function getCharge(){
    const url = `/v1/${owner}/${projectsId}/collaborators`;
    axios.get(url,{params:{keyword:charge,only_name:true}}).then(result=>{
      if(result && result.data){
        setChargeList(result.data.collaborators);
      }
    })
  }
  // 获取里程碑列表
  useEffect(()=>{
    getMillstone();
  },[millstone])

  function getMillstone(){
    const url = `/v1/${owner}/${projectsId}/milestones`;
    axios.get(url,{params:{keyword:millstone,only_name:true}}).then(result=>{
      if(result && result.data){
        setMillstoneList(result.data.milestones);
      }
    })
  }
  // 获取标记列表
  useEffect(()=>{
    getSign();
  },[tag])
  function getSign(){
    const url = `/v1/${owner}/${projectsId}/issue_tags`;
    axios.get(url,{params:{keyword:tag,only_name:true}}).then(result=>{
      if(result && result.data){
        setTagList(result.data.issue_tags);
      }
    })
  }
  // 获取标记列表
  useEffect(()=>{
    getBranch(branch);
  },[branch])
  function getBranch(branch){
    if(branch){
      let b = [...branchList];
      let l = b.filter(i=>i.name.indexOf(branch)>-1);
      setBranchList(l);
      return ;
    }
    const url = `/${owner}/${projectsId}/branches.json`;
    axios.get(url,{params:{keyword:tag}}).then(result=>{
      if(result && result.data){
        setBranchList(result.data);
      }
    })
  }

  // 可单个编辑保存右侧的项(!copy:非复制状态下)
  function saveForeach(c,s,p,t,m,b,sDate,eDate,rewardAmount){
    if(!copy){
      const url = `/v1/${owner}/${projectsId}/issues/${index}`;
      axios.patch(url,{
        branch_name: b ? b.join(",") :undefined,
        status_id: s ? s.join(",") : undefined,
        priority_id: p ? p.join(",") :undefined,
        milestone_id: m ? m.join(",") :undefined,
        issue_tag_ids: t?t:undefined,
        assigner_ids: c?c:undefined,
        start_date:sDate,
        due_date:eDate,
        blockchain_token_num:rewardAmount
      }).then(result=>{
        if(result){
          Init();
          // 更新操作日志
          setCommentReload(Math.random());
        }
      }).catch(error=>{})
    }
  }

  function deleteFunc(){
    const url = `/v1/${owner}/${projectsId}/issues/${index}`;
    axios.delete(url).then(result=>{
      if(result){
        props.showNotification("疑修删除成功！");
        props.history.push(`/${owner}/${projectsId}/issues`);
      }
    }).catch(error=>{})
  }

  // 编辑保存
  function createFunc(values,fileList,receivers_login,description){
    let params ={
      subject: values.subject,
      attachment_ids: fileList,
      receivers_login: receivers_login,
      description: description
    }
    if(!copy){
      // 调用编辑保存接口
      const url = `/v1/${owner}/${projectsId}/issues/${index}`;
      axios.patch(url,{
          ...params
      }).then(result=>{
        if(result){
          window.scrollTo(0,0);
          props.showNotification("疑修更新成功！");
          Init();
          setEdit(false);
          // 刷新操作记录
          setCommentReload(Math.random());
        }
      }).catch(error=>{})
    }else{
      // 调用新建保存接口
      const url = `/v1/${owner}/${projectsId}/issues`;
      let b = branch_choose && branch_choose.length>0 ? branch_choose.map(i=>{return i.name}) :undefined;
      let t = tag_choose && tag_choose.length>0 ? tag_choose.map(i=>{return i.id}) :undefined;
      let a = assigner_choose && assigner_choose.length>0 ? assigner_choose.map(i=>{return i.id}) :undefined;
      let m = millstone_choose && millstone_choose.length>0 ? millstone_choose.map(i=>{return i.id}) :undefined;
      let p = prioritie_choose && prioritie_choose.length>0 ? prioritie_choose.map(i=>{return i.id}) :undefined;
      let s = status_choose && status_choose.length>0 ? status_choose.map(i=>{return i.id}) :undefined;
      axios.post(url,{
        ...params,
        branch_name: b && b.join(","),
        status_id: s && s.join(","),
        priority_id: p && p.join(","),
        milestone_id: m && m.join(","),
        issue_tag_ids: t,
        assigner_ids: a,
        start_date,
        due_date
      }).then(result=>{
        if(result && result.data && result.data.project_issues_index){
          window.scrollTo(0,0);
          props.showNotification("任务复制成功！");
          props.history.push(`/${owner}/${projectsId}/issues/${result.data.project_issues_index}`);
        }
      }).catch(error=>{})
    }
  }

  // 取消编辑或复制
  function onCancel(){
    if(copy){
      props.history.push(`/${owner}/${projectsId}/issues/${index}`);
    }else{
      setEdit(false);
      window.scrollTo(0,0);
    }
  }

  function refreshFunc(){
    // 更新操作日志
    setCommentReload(Math.random());
  }


  // 悬赏金额 失去焦点保存数据
  function amountBlur(e){
    if(!editFlag){
      setRewardFlag(false);
      const value = e.target.value;
      if(value<0){
        message.info("请输入大于0的正整数");
        setRewardAmount(rewardAmount);
        return;
      }
      setRewardAmount(e.target.value);
      if((value && value >= 0) || !value){
        saveForeach(undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,value);
      }
    }
  }
  function changeAmount(value){
    if(amountEditFlag){
      setRewardAmount(value);
    }else{
      setRewardAmount(rewardAmount);
    }
  }
  return(
    details ? 
    <Box>
      <LongWidth>
        <DelBox 
          visible={delVisible} 
          onCancel={()=>setDelVisible(false)} 
          onSuccess={deleteFunc}
          content={<div style={{paddingTop:"3px"}}><p className="font-15 mb20">您确定要删除当前疑修？</p></div>}
        />
        {
          edit ?
          <div style={{paddingTop:"25px"}} >
            <NewPanel 
              {...props}
              onCancel={onCancel}
              title={details.subject}
              desc={edit ? desc : undefined}
              files={copy ? undefined : details.attachments}
              createFunc={createFunc}
              owner = {owner} projectsId = {projectsId}
            />
          </div>
          :
          <div>
            <div className="editpanel">
              <div className="detailbanner">
                <div className="detailtitle">
                  <div className="mb12">
                    {details.priority && <span className={statusTag(details.priority.name)}>{ details.priority.name }</span> }
                    <p className="name">{details.subject}</p>
                  </div>
                  <div>
                    <div className="ilog mt5">
                      <Copy value={`/${owner}/${projectsId}/issues/${index}`}><span className="number">#{details.project_issues_index}</span></Copy>
                    </div>
                    {
                      details.author &&
                      <div>
                        <Link to={`/${details.author.login}`} className="author"><img src={getImageUrl(details.author.image_url)} alt="" />{details.author.name}</Link>
                        <span className="ml10" style={{color:"#898d9d"}}>添加于{details.created_at}</span>
                      </div>
                    }
                  </div>
                </div>
                {
                  details.user_permission &&
                  <ul className="detailoperate">
                    <li><a className="color-blue" onClick={()=>setEdit(true)}><i className="iconfont icon-a-bianji12 font-12 mr5"></i>编辑</a></li>
                    <li><Link to={`/${owner}/${projectsId}/issues/${index}/copy`} className="color-blue ml20"><i className="iconfont icon-a-fuzhi2 font-12 mr5"></i>复制</Link></li>
                    <li><a className="color-red ml20" onClick={()=>setDelVisible(true)}><i className="iconfont icon-fuzhi-shanchu font-12 mr5"></i>删除</a></li>
                  </ul>
                }
              </div>
              <div class="descPanel">
                {desc ? 
                  <RenderHtml owner={owner} projectsId={projectsId} className="break_word_comments imageLayerParent" value={desc} url={props.history.location} />
                  : 
                  <span className="color-grey-9 ml3 mr3">暂无描述</span>
                }
                {details.attachments && details.attachments.length > 0 ?
                  <Attachments
                    attachments={details.attachments}
                    showNotification={props.showNotification}
                  />
                  :  ""
                }
              </div>
            </div>
            <div id="commentList">
              <CommentList {...props} issueInfo={details} reload = {commentReload} reloadComment = {()=>{setCommentReload(Math.random())}}/>
            </div>
          </div>
        }
      </LongWidth>
      <div className="shortwidth mt25">
        {orderId && <div className="claimpart"><Claims issue_id={orderId} {...props} refreshFunc={refreshFunc}/></div>}
        <ChooseMenu 
          placeholder="负责人" 
          menus={chargeList}
          searchFunc={(value)=>{setCharge(value)}}
          headImg
          selectValueList={assigner_choose}
          editFlag={editFlag}
          chooseFunc={(list)=>{setAssigner_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(l);}}
          double={5}
          removeFlag={!editFlag}
        />
        <DropMenu 
          placeholder="状态" 
          menus={statusList}
          selectValueList={status_choose}
          mustFlag
          editFlag={editFlag}
          chooseFunc={(list)=>{setStatus_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(undefined,l);}}
        />
        <DropMenu 
          placeholder="优先级" 
          menus={prioritiesList}
          selectValueList={prioritie_choose}
          colorFlag="1"
          mustFlag
          editFlag={editFlag}
          chooseFunc={(list)=>{setPrioritie_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(undefined,undefined,l);}}
        />
        <ChooseMenu 
          placeholder="标记" 
          menus={tagList}
          searchFunc={(value)=>{setTag(value)}}
          selectValueList={tag_choose}
          chooseFunc={(list)=>{setTag_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(undefined,undefined,undefined,l);}}
          double={3}
          colorFlag="2"
          removeFlag={!editFlag}
          editFlag={editFlag}
          onAdd={permission && permission !== "Reporter" ? ()=>{getSign();} :false}
          owner={owner}
          projectsId={projectsId}
        />
        <ChooseMenu 
          placeholder="里程碑" 
          menus={millstoneList}
          searchFunc={(value)=>{setMillstone(value)}}
          selectValueList={millstone_choose}
          editFlag={editFlag}
          auto
          chooseFunc={(list)=>{setMillstone_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(undefined,undefined,undefined,undefined,l);}}
        />
        <ChooseMenu 
          placeholder="关联分支" 
          menus={branchList}
          auto
          searchFunc={(value)=>{setBranch(value)}}
          selectValueList={branch_choose}
          editFlag={editFlag}
          chooseFunc={(list)=>{setBranch_choose(list);let l = list && list.length>0 ?list.map(i=>{return i.id || i.name}):[];saveForeach(undefined,undefined,undefined,undefined,undefined,l);}}
        />
        {
          open_blockchain &&
          <li style={{paddingBottom:"0px"}}>
            <span>
              悬赏金额
              {/* {!editFlag && <a onClick={editReward}><i className="iconfont icon-a-bianji12 font-13" style={{color:"#898d9d"}}></i></a> } */}
            </span>
            <InputNumber 
              onBlur={amountBlur} 
              placeholder="请输入悬赏金额" 
              style={{width:"100%",color:rewardAmount?"#333":"#acb0bf"}} 
              value={rewardAmount} 
              onChange={changeAmount} 
              className="borderNo mt5" 
              disabled={!amountEditFlag}
            />
          </li>
        }
        <Date name="开始日期" today={start_date} setDate={(date)=>{setStartDate(date);saveForeach(undefined,undefined,undefined,undefined,undefined,undefined,date)}} editFlag={editFlag}/>
        <Date name="结束日期" today={due_date} setDate={(date)=>{setDueDate(date);saveForeach(undefined,undefined,undefined,undefined,undefined,undefined,undefined,date)}} editFlag={editFlag}/>
      </div>
    </Box>
    :
    <div style={{width:"100%",display:"flex",alignItems:"center",justifyContent:'center',height:"400px"}}><Spin /></div>
  )
}
export default Form.create()(forwardRef(Details));