import React , { forwardRef , useCallback } from 'react';
import { Form , Input , Radio , Checkbox , Button , Select } from 'antd';
import { Link } from 'react-router-dom';
import { WhiteBack , Cancel } from '../Component/layout';
import Title from '../Component/Title';
import styled from 'styled-components';

const { Option } = Select;
const Div = styled.div`{
  padding:0px 30px
}`
const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
};

export default Form.create()(
  forwardRef(({ form })=>{
    const { getFieldDecorator } = form;
    const helper = useCallback(
      (label, name, rules, widget, isRequired ) => (
        <React.Fragment>
          <span className={isRequired?"required":""}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </React.Fragment>
      ),
      []
    );
    return(
      <WhiteBack className="hooksNew">
        <Title>
          <span>管理web钩子</span>
        </Title>
        <Div>
          <p className="mt15 mb15 color-grey-8">Gitea 将向目标 URL 发送具有指定内容类型的 POST 请求。在 <Link to={""} className="color-blue">webhooks 指南</Link> 中阅读更多内容。</p>
          {helper(
            "目标URL",
            "URL",
            [{ required: true, message: "请输入目标URL" }],
            <Input placeholder="目标URL" />,true
          )}
          {helper(
            "HTTP方法",
            "HTTP",
            [],
            <Select placeholder="HTTP方法" >
              <Option value="0">请选择HTTP方法</Option>
            </Select>
          )}
          {helper(
            "POST Content Type",
            "Type",
            [],
            <Select placeholder="POST Content Type" >
              <Option value="0">请选择POST Content Type</Option>
            </Select>
          )}
          {helper(
            "秘钥文本",
            "passwordtext",
            [],
            <Input type="password" />
          )}
          {helper(
            "触发条件：",
            "condition",
            [],
            <Radio.Group>
              <Radio value={"0"} style={radioStyle}>推送事件</Radio>
              <Radio value={"1"} style={radioStyle}>所有事件</Radio>
              <Radio value={"2"} style={radioStyle}>自定义事件</Radio>
            </Radio.Group>
          )}
          {helper(
            "分支过滤",
            "branch",
            [],
            <Input type="password" />
          )}
          <p className="font-12 mt10 pb15" style={{borderBottom:"1px solid #eee"}}>推送、创建，删除分支事件白名单，支持匹配符。如果为空或者 *，所有分支的事件均被触发。<br/>语法参见 <a href="http://github.com/gobwas/glob" className="color-blue" target="_blank">github.com/gobwas/glob</a> 。示例： Master, ${'{master,release*}'}。</p>
          {helper(
            "",
            "active",
            [],
            <Checkbox>激活<span className="ml30 color-grey-8">触发事件的信息将发送到此 webhook 网址。</span></Checkbox>
          )}
          <div className="df pb30">
            <Button type="primary">保存</Button>
            <Cancel className="ml30">取消</Cancel>
          </div>
        </Div>
      </WhiteBack>
    )
  })
)