import React , { forwardRef , useCallback } from 'react';
import { Form , Input , Radio , Checkbox , Switch , Button } from 'antd';
import { Banner , WhiteBack , AlignCenter , Cancel } from '../../Component/layout';
import styled from 'styled-components';

const TextArea = Input.TextArea;
const Div = styled.div`{
  padding:20px 30px;
}`
const OptionStyle = {
  lineHeight:"25px",
  height:'25px',
  display:'block'
}
const addStyle = {
  ...OptionStyle,
  marginBottom:"7px"
}

export default Form.create()(
  forwardRef(({ form })=>{
    const { getFieldDecorator, validateFields, setFieldsValue } = form;
    
    const helper = useCallback(
      (label, name, rules, widget, isRequired , mbValue ) => (
        <React.Fragment>
          <span className={isRequired?"required":""}>{label}</span>
          <Form.Item style={{marginBottom:`${mbValue}px` || "20px"}}>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </React.Fragment>
      ),
      []
    );
    return(
      <WhiteBack className="mb30">
        <Banner>新建团队</Banner>
        <Div>
          <Form>
            {helper(
              '团队名称：',
              "name",
              [{ required: true, message: "请输入团队名称" }],
              <Input placeholder="请输入团队名称" />,true
            )}
            {helper(
              <span>团队描述：<span className="color-grey-8">(描述团队的目的或作用)</span></span>,
              "desc",
              [],
              <TextArea
                placeholder="请输入团队描述"
              />
            )}
            {helper(
              '项目权限：',
              "operation",
              [],
              <Radio.Group>
                <Radio value="0" style={addStyle}>指定项目<span className="color-grey-8">(团队成员将只能访问添加到团队的项目。 选择此项 <span className="color-grey-3">将不会</span> 自动删除已经添加的项目)</span></Radio>
                <Radio value="1" style={OptionStyle}>所有项目<span className="color-grey-8">(团队可以访问所有项目。选择此选项将 <span className="color-grey-3">添加所有现有的</span> 项目到指定团队)</span></Radio>
              </Radio.Group>,false,0
            )}
            {helper(
              '',
              "operation",
              [],
              <Checkbox value="0" style={OptionStyle}>新建项目<span className="color-grey-8">(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</span></Checkbox>
            )}
            {helper(
              '权限：',
              "halfoperation",
              [],
              <Radio.Group>
                <Radio value="0" style={addStyle}>读取权限<span className="color-grey-8">(成员可以查看和克隆团队项目)</span></Radio>
                <Radio value="1" style={addStyle}>写入权限<span className="color-grey-8">(成员可以查看和推送提交到团队项目)</span></Radio>
                <Radio value="2" style={OptionStyle}>管理员权限<span className="color-grey-8">(成员可以拉取和推送到团队项目同时可以添加协作者)</span></Radio>
              </Radio.Group>,false
            )}
            <p class="required">允许访问项目单元：</p>
            <AlignCenter>
              {helper(
                '',
                "allowCode",
                [],
                <Switch />,false,0
              )}
              <span className="ml30 color-grey-3">代码库<span className="color-grey-8 ml15">(查看源码、文件、提交和分支)</span></span>
            </AlignCenter>
            <AlignCenter>
              {helper(
                '',
                "allowtask",
                [],
                <Switch />,false,0
              )}
              <span className="ml30 color-grey-3">任务<span className="color-grey-8 ml15">(组织 bug 报告、任务和里程碑)</span></span>
            </AlignCenter>
            <AlignCenter>
              {helper(
                '',
                "allowPull",
                [],
                <Switch />,false,0
              )}
              <span className="ml30 color-grey-3">合并请求<span className="color-grey-8 ml15">(启用合并请求和代码评审)</span></span>
            </AlignCenter>
            <AlignCenter className="mb20">
              {helper(
                '',
                "allowVersion",
                [],
                <Switch />,false,0
              )}
              <span className="ml30 color-grey-3">版本发布<span className="color-grey-8 ml15">(跟踪项目版本和下载)</span></span>
            </AlignCenter>
            <Button type={"primary"}>新建团队</Button>
            <Cancel className="ml30">取消</Cancel>
          </Form>
        </Div>
      </WhiteBack>
    )
  })
)