import React, { forwardRef , useCallback } from 'react';
import { Form , Input , Cascader , Radio ,Checkbox , Divider , Button } from 'antd';
import { WhiteBack , FlexAJ } from '../../Component/layout';
import Title from '../../Component/Title';
import styled from 'styled-components';
import { locData } from "../../Utils/locData";
const TextArea = Input.TextArea;

const Div = styled.div`{
  padding:20px 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 ) => (
        <div>
          <span className={isRequired?"required":""}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </div>
      ),
      []
    );
    return(
      <div>
        <WhiteBack>
          <Title>基本设置</Title>
          <Div>
            <Form>
              {helper(
                "组织名称：",
                "name",
                [{ required: true, message: "请输入组织名称" }],
                <Input placeholder="请输入组织名称" />,true
              )}
              {helper(
                "组织描述：",
                "desc",
                [],
                <TextArea placeholder="请输入组织名称" />
              )}
              {helper(
                "官方网站：",
                "web",
                [],
                <Input placeholder="请输入官方网站" />
              )}
              {helper(
                '所在地区：',
                "area",
                [],
                <Cascader placeholder="请选择城市" options={locData}/>
              )}
              {helper(
                '可见性：',
                "opacity",
                [],
                <Radio.Group>
                  <Radio value="0" style={radioStyle}>公开</Radio>
                  <Radio value="0" style={radioStyle}>受限<span>（仅对登录用户可见）</span></Radio>
                  <Radio value="0" style={radioStyle}>私有<span>（仅对组织成员可见）</span></Radio>
                </Radio.Group>
              )}
              {helper(
                '权限：',
                "operation",
                [],
                <Checkbox value="0" style={radioStyle}>仓库管理员可以添加或移除团队的访问权限</Checkbox>
              )}
              <Divider/>
              {helper(
                '最大仓库数：',
                "number",
                [],
                <Input value="-1" style={{width:"350px"}}/>
              )}
              <Button type={"primary"}>更新仓库设置</Button>
            </Form>
          </Div>
        </WhiteBack>
        <WhiteBack className="padding20 mt20">
          <div className="warningBox">
            <div className="warningTitle">删除当前组织</div>
            <div className="warningContent">
              <p className="font-16 mb15">删除操作会永久清除该组织的信息，并且不可恢复！</p>
              <FlexAJ>
                <div>
                  <span className="required">密码：</span>
                  <Input type="password" style={{width:"350px"}} />
                </div>
                <a className="warningDelete">删除组织</a>
              </FlexAJ>
            </div>
          </div>
        </WhiteBack>
      </div>
    )
  })
)