import React,{ forwardRef , useCallback } from 'react';
import './Index.scss';
import { Form , Input , Cascader , Radio , Checkbox , Upload , Button } from "antd";
import { locData } from "../Utils/locData";


export default Form.create()(
  forwardRef(({form})=>{
    const { getFieldDecorator, validateFields, setFieldsValue } = form;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    }
    const helper = useCallback(
      (label, name, rules, widget, isRequired = true) => (
        <React.Fragment>
          <span className={isRequired?"lables must":"lables"}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </React.Fragment>
      ),
      []
    );
    return(
      <div className="newMain">
        <div className="main">
          <div className="teamBox">
            <p className="teamBox-title">新建组织</p>
            <Form className="teamBox-form">
              {helper(
                <span>组织名称：<span className="color-grey-8">(组织名称应该简单明了)</span></span>,
                "name",
                [{ required: true, message: "请输入组织名称" }],
                <Input
                  placeholder="请输入组织名称"
                />
              )}
              {helper(
                '组织描述',
                "desc",
                [{ required: true, message: "请输入组织描述" }],
                <Input.TextArea 
                  autoSize={{ minRows: 3, maxRows: 5 }}
                  placeholder="请输入组织描述"
                />
              )}
              {helper(
                '所在地区',
                "area",
                [],
                <Cascader placeholder="请选择城市" options={locData}/>,false
              )}
              {helper(
                '可见性',
                "exposure",
                [{ required: true, message: "请选择可见性" }],
                <Radio.Group name="exposure">
                  <Radio style={radioStyle} value="1" key={1}>公开</Radio>
                  <Radio style={radioStyle} value="2" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
                  <Radio style={radioStyle} value="3" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
                </Radio.Group>
              )}
              {helper(
                '选择头像',
                "photo",
                [],
                <Upload></Upload>,false
              )}
              {helper(
                '权限',
                "operation",
                [],
                <Checkbox value="1" key={1}>项目管理员可以添加或移除团队的访问权限</Checkbox>,false
              )}
            </Form>
          </div>
          <p className="mt20">
            <Button type="primary" className="mr30">创建组织</Button>
            <Button className="grey">取消</Button>
          </p>
        </div>
      </div>
    )
  })
)