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

const {Option} = Select;
const Div = styled.div`{
  padding:20px 30px;
}`
export default Form.create()(
  forwardRef(( { form })=>{
    const { getFieldDecorator } = form;
    const helper = useCallback(
      (label, name, rules, widget , className , isRequired ) => (
        <div className={className}>
          <span className={isRequired?"required":""}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </div>
      ),
      []
    );
    return(
      <WhiteBack>
        <Title>新建保护分支规则</Title>
        <Div>
          {helper(
            "设置分支/通配符",
            "sign",
            [{ required: true, message: "请输入分支/通配符" }],
            <Input placeholder="请输入分支名称或通配符规则" />,'setStyleRule'
          )}
          <p className="color-grey-8 mb20">例如：设置为“master”，则对名称为“master”的分支生效；设置为“*-stable“ 或 ”release*“，则对名称符合此通配符的所有保护分支生效。</p>
          {helper(
            "可推送代码成员",
            "psuhmember",
            [],
            <Select placeholder="请选择仓库成员" >
              <Option value="0">请选择仓库成员</Option>
            </Select>,'setSelectWidth'
          )}
          {helper(
            "可合并Pull Request成员",
            "pullmember",
            [],
            <Select placeholder="请选择仓库成员" >
              <Option value="0">请选择仓库成员</Option>
            </Select>,'setSelectWidth'
          )}
          <div className="df pb30">
            <Button type="primary">保存</Button>
            <Cancel className="ml30">取消</Cancel>
          </div>
        </Div>
      </WhiteBack>
    )
  })
)