import React , { forwardRef , useCallback , useState } from 'react';
import { Form , Checkbox , Input , Button } from 'antd';
import styled from 'styled-components';
import './setting.scss';

const Div = styled.div`{
  margin:0px 30px;
  background:#FAFAFA;
  padding:0px 20px 10px 20px;
  .ant-form.ant-form-horizontal{
    padding:15px 0px;
  }
}`
const P = styled.p`{
  padding:15px 0px;
  font-size:16px;
  color:#333;
  border-bottom:1px solid #DDDDDD;
}`
const Item = styled.div`{
  padding-bottom:10px;
  &>span{
    color:#333;
  }
  .ant-checkbox-wrapper{
    height:20px;
    line-height:20px;
  }
  .ant-row.ant-form-item{
    margin-bottom:0px;
  }
}`
export default Form.create()(
  forwardRef(({ form })=>{
    const { getFieldDecorator, validateFields, setFieldsValue } = form;
    const [ mirrorCheck , setMirrorCheck ] = useState(false)
    const helper = useCallback(
      (label, name, rules, widget, classname , isRequired = true ) => (
        <Item className={classname}>
          <span required={isRequired}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </Item>
      ),
      []
    );
    return(
      <Div>
        <P>镜像设置</P>
        <Form>
          {helper(
            "修剪",
            "cut",
            [],
            <Checkbox>删除过时的远程跟踪引用</Checkbox>,'iteminline setHeight'
          )}
          {/* {helper(
            "镜像间隔（有效时间单位为“h”“m”“s”），0将禁用自动同步。",
            "time",
            [],
            <Input />,'iteminline'
          )} */}
          {helper(
            "从URL克隆",
            "clone",
            [],
            <Input />
          )}
          <p className="color-grey-8">在Clone认证部分里输入必要的信息</p>
          <p className="mt10 mb10 color-grey-3 pointer" onClick={()=>setMirrorCheck(!mirrorCheck)}>需要授权验证<i className={mirrorCheck?"iconfont icon-xiajiantou font-13 ml10 color-grey-8":"iconfont icon-youjiantou font-13 ml10 color-grey-8"}></i></p>
          { mirrorCheck ? 
            <div className="df" style={{alignItems:'center'}}>
              {helper(
                "用户名",
                "name",
                [],
                <Input />,'iteminline'
              )}
              {helper(
                "密码",
                "password",
                [],
                <Input type={'password'}/>,'iteminline ml30'
              )}
            </div>
          :""}
          <p className="mb15">上次同步  2020-06-16 17：40</p>
          <Button type={"primary"}>同步</Button>
        </Form>
      </Div>
    )
  })
)