import React, { useEffect, useState } from 'react';
import { Banner , FlexAJ } from '../../Component/layout';
import DeleteBox from '../../Component/DeleteModal/Index';
import './Index.scss';
import { Button , List, Pagination } from 'antd';
import { Link } from 'react-router-dom';
import axios from 'axios';

const limit = 15;
function Index(props) {
  const [ data , setData ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(1);
  const [ deleteId , setDeleteId ] = useState(undefined);
  const [ visible , setVisible ] = useState(false);
  const [ url , setUrl ] = useState(undefined);

  const { owner , projectsId } = props.match.params;

  useEffect(()=>{
    if(owner && projectsId){
      getData();
    }
  },[owner,projectsId,page])

  function getData() {
    const url = `/${owner}/${projectsId}/webhooks.json`;
    axios.get(url,{
      params:{page,limit}
    }).then(result=>{
      if(result && result.data){
        setData(result.data.webhooks);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  function deleteFunc(id,url) {
    setDeleteId(id);
    setUrl(url);
    setVisible(true);
  }

  function onSuccess() {
    if(deleteId){
      const url = `/${owner}/${projectsId}/webhooks/${deleteId}.json`;
      axios.delete(url).then(result=>{
        if(result){
          props.showNotification("webhook删除成功！");
          if(page>1 && data.length === 1){
            setPage(page-1);
          }else{
            getData();
          }
          setVisible(false);
        }
      }).catch(error=>{})
    }
  }

  function addFunc() {
    if(total >= 50){
      return props.showNotification("webhooks数量已到上限！请删除暂不使用的webhooks以进行添加操作");
    }
    props.history.push(`/${owner}/${projectsId}/settings/webhooks/new`)
  }

  return(
    <div>
      <DeleteBox 
        visible={visible} 
        onCancel={()=>setVisible(false)}
        onSuccess={onSuccess}
        title="删除Webhook"
        content="您确定要删除此Webhook吗？"
        subTitle={`删除后未来事件将不会推送至此Webhook地址：${url}`}
      />
      <Banner>
        <span>Webhooks(网络钩子)</span>
        <Button type="primary" size="large" onClick={addFunc}>添加Webhook</Button>
      </Banner>
      <div className="hookpanel">
        <p className="color-grey-3">每当特定事件（如push代码，合并请求被编辑）发生时，我们将通过webhook给您提供的远程URL发送post请求。您可以在我们的<a className="color-blue hoverLine" target="_blank" href="https://forum.trustie.net/forums/3408/detail">webhooks指南</a>中了解更多信息</p>
        {
          data && data.length> 0 &&
          <List>
            {data.map((i,k)=>{
              return(
                <List.Item key={k}>
                  <i className="iconfont icon-a-xuanzhongwebhookicon color-grey-d mr12 font-17"></i>
                  <Link to={`/${owner}/${projectsId}/settings/webhooks/${i.id}`} className="webName">{i.url}</Link>
                  <span>
                    <Button ghost type={"primary"} onClick={()=>{props.history.push(`/${owner}/${projectsId}/settings/webhooks/${i.id}`)}}>编辑</Button>
                    <Button ghost className="ml20" type="danger" onClick={()=>{deleteFunc(i.id,i.url)}}>删除</Button>
                  </span>
                </List.Item>
              )
            })}
          </List>
        }
        {
          total > limit &&
          <div className="edu-txt-center mt20 mb20">
            <Pagination current={page} total={total} onChange={e=>{setPage(e)}} pageSize={limit}/>
          </div>
        }
      </div>
    </div>
  )
}
export default Index;