import React,{ forwardRef , useCallback , useState } from 'react';
import './Index.scss';
import { Form , Input , Radio , Checkbox , Button, InputNumber } from "antd";
import UploadImage from './Component/UploadImage';
import axios from 'axios';

export default Form.create()(
  forwardRef(({ form , showNotification , history })=>{
    const [ image , setImage ] = useState(undefined);
    const { getFieldDecorator, validateFields } = 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>
      ),
      []
    );

    // 获取上传的图片
    function getImage(image){
      setImage(image);
    }

    // 创建组织
    function createOrganize(){
      validateFields((error,values)=>{
        if(!error){
          const url = `/organizations.json`;
          axios.post(url,{
            ...values,image
          }).then(result=>{
            if(result && result.data){
              showNotification("组织创建成功！");
              history.push(`/organize/${result.data.name}`);
            }
          }).catch(error=>{})
        }
      })
    }

    return(
        <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(
                '组织描述',
                "description",
                [{ required: true, message: "请输入组织描述" }],
                <Input.TextArea 
                  autoSize={{ minRows: 3, maxRows: 5 }}
                  placeholder="请输入组织描述"
                />
              )}
              {helper(
                '所在地区',
                "location",
                [],
                // <Cascader placeholder="请选择城市" options={locData}/>,false
                <Input placeholder="请输入地址"/>,false
              )}
              {helper(
                '可见性',
                "visibility",
                [{ required: true, message: "请选择可见性" }],
                <Radio.Group name="exposure">
                  <Radio style={radioStyle} value="common" key={1}>公开</Radio>
                  <Radio style={radioStyle} value="limited" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
                  <Radio style={radioStyle} value="privacy" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
                </Radio.Group>
              )}
              <p className="font-16">选择头像</p>
              <UploadImage getImage={getImage}/>

              {helper(
                '权限',
                "repo_admin_change_team_access",
                [],
                <Checkbox value="1" key={1}>项目管理员可以添加或移除团队的访问权限</Checkbox>,false
              )}
              {helper(
                <span>最大仓库数：<span className="color-grey-8">（设置为-1表示使用全局默认值）</span></span>,
                "max_repo_creation",
                [],
                <InputNumber
                  placeholder="最大仓库数" style={{width:"100px"}}
                />,false
              )}
            </Form>
          </div>
          <p className="mt20">
            <Button type="primary" className="mr30" onClick={createOrganize}>创建组织</Button>
            <Button className="grey">取消</Button>
          </p>
        </div>
    )
  })
)