import React, { useState, useEffect } from "react";
import { WhiteBack, Greenline, Redline, FlexAJ } from "../Component/layout";
import { getHooks } from "../GetData/getData";
import Title from "../Component/Title";
import { Button } from "antd";
import { Link } from "react-router-dom";
import styled from "styled-components";
import "./setting.scss";

const Div = styled.div`
   {
    padding: 0px 30px;
    min-height: 400px;
  }
`;
const P = styled.p`
   {
    padding: 22px 0px;
    border-bottom: 1px solid #eee;
  }
`;
const Manage = styled.div`
   {
    padding: 12px 0px;
  }
`;
export default ((props) => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [data, setData] = useState(undefined);

  const {projectsId} = props.match.params;
  // useEffect(() => {
  //   if(projectsId){
  //     getHook(projectsId);
  //   }
  // },[projectsId]);

  async function getHook(id) {
    const params = {
      page,
      limit
    };
    let data = await getHooks(id, params);
    data && setData(data);
  }
  return (
    <WhiteBack>
      <Title>
        <span>管理web钩子</span>
        <Button type="primary">添加web钩子</Button>
      </Title>
      <Div>
        <P>
          当Gitea事件发生时，Web钩子自动发出HTTP POST请求。在{" "}
          <Link to="" className="color-blue">
            指南
          </Link>{" "}
          中阅读更多内容。
        </P>
        <Manage>
          <FlexAJ className="manageItem">
            <span className="webName">
              https://gitea.com/zxf/homebrew-cask-versions/settings/hooks/gitea/new
            </span>
            <span>
              <Redline>删除</Redline>
              <Greenline className="ml30">编辑</Greenline>
            </span>
          </FlexAJ>
          <FlexAJ className="manageItem">
            <span className="webName">
              https://gitea.com/zxf/homebrew-cask-versions/settings/hooks/gitea/new
            </span>
            <span>
              <Redline>删除</Redline>
              <Greenline className="ml30">编辑</Greenline>
            </span>
          </FlexAJ>
        </Manage>
      </Div>
    </WhiteBack>
  );
});
