import React, { useEffect, useState } from "react";
import Nodata from '../Nodata';
import { Pagination , Spin } from 'antd';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';
import Axios from "axios";

const limit = 15;
function Notify(props){
  const username = props.match.params.username;
  const [ list , setList ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);

  useEffect(()=>{
    if(username){
      getList();
    }
  },[username,page])

  function getList(){
    const url = `/users/${username}/applied_messages.json`;
    Axios.get(url,{
      params:{
        page,per_page:limit
      }
    }).then(result=>{
      if(result){
        setList(result.data.applied_messages);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  useEffect(()=>{
    if(username){
      setIsSpin(true);
      getList();
    }
  },[username,page])

  function getList(){
    const url = `/users/${username}/applied_messages.json`;
    Axios.get(url,{
      params:{
        page,per_page:limit
      }
    }).then(result=>{
      if(result){
        setList(result.data.applied_messages);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  function renderStatus(status,applied){
    let { project , owner} = applied
    if(status){
      switch(status){
        case 'canceled':
          return <p>取消转移【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库</p>
        case 'common':
          return <p>正在将【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库转移给【<Link to={`/${owner && owner.login}`}>{owner && owner.name}</Link>】</p>
        case 'successed':
          return <p>【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库成功转移给【<Link to={`/${owner && owner.login}`}>{owner && owner.name}</Link>】</p>
        default:
          return <p>拒绝转移【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库</p>
      }
    }else{
      return ""
    }
  }

  function renderApplyStatus(status,applied) {
    let { project } = applied;
    if(status){
      switch(status){
        case 'successed':
          return <p>已通过你加入【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
        default:
          return <p>已拒绝你加入【<Link to={`/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
      }
    }else{
      return ""
    }
  }

  function renderApplyStatus(status,applied) {
    let { project } = applied;
    if(status){
      switch(status){
        case 'successed':
          return <p>已通过你加入【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
        default:
          return <p>已拒绝你加入【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
      }
    }else{
      return ""
    }
  }

  return(
    <div>
      <Spin spinning={isSpin}>
        <div style={{minHeight:"400px"}}>
          {
            list && list.length > 0 ? 
            <ul className="notifyList">
              {
                list.map((i,k)=>{
                  console.log(i);
                  return(
                    <li i={k}>
                      <Link to={`/${i.applied_user && i.applied_user.login}`}><img src={getImageUrl(`/${i.applied_user && i.applied_user.image_url}`)} alt="" className="notifyImg" /></Link>
                      <div className="notifyFlex">
                        <p className="notifyInfos">
                          <Link to={`/${i.applied_user && i.applied_user.login}`} className="font-15 mr20">{i.applied_user && i.applied_user.name}</Link>
                          <span className="color-grey-9">{i.time_ago}</span>
                        </p>
                        { i.applied_type === "AppliedProject" ? renderApplyStatus(i.status,i.applied):renderStatus(i.status,i.applied)}
                      </div>
                    </li>
                  )
                })
              }
            </ul>
            :
            ""
          }
          {list && list.length === 0 && <Nodata _html="暂无通知" />}
          {
            total > limit && 
            <div className="edu-txt-center pt20 pb20">
              <Pagination simple pageSize={limit} total={total} current={page} onChange={(p)=>{setPage(p)}}/>
            </div>
          }
        </div>
      </Spin>
    </div>
  )
}
export default Notify;