import React, { forwardRef, useCallback, useState, useEffect } from "react";
import { Form, Input, Select, Button } from "antd";
import Title from "../Component/Title";
import { WhiteBack, Cancel } from "../Component/layout";
import styled from "styled-components";
import axios from "axios";

const { Option } = Select;
const Div = styled.div`
{
  padding: 20px 30px;
}
`;
export default Form.create()(
  forwardRef(({ form, match, history }) => {
    const [list, setList] = useState(undefined);
    const { projectsId, owner } = match.params;
    const { getFieldDecorator, validateFields } = form;

    useEffect(() => {
      const url = `/${owner}/${projectsId}/collaborators.json`;
      axios.get(url).then((result) => {
        setList(result.data.members);
      })
      .catch((error) => {});
    }, []);

    function getMember(list) {
      return (
        list &&
        list.length > 0 &&
        list.map((item, key) => {
          return (
            item.role !== "Manager" && (
              <Option value={item.id}>{item.name}</Option>
            )
          );
        })
      );
    }
    function saveBranchRule() {
      validateFields((error, values) => {
        if (!error) {
        }
      });
    }

    const helper = useCallback(
      (label, name, rules, widget, className, isRequired) => (
        <div className={className}>
          <span className={isRequired ? "required" : ""}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
          </Form.Item>
        </div>
      ),
      []
    );
    return (
      <WhiteBack>
        <Title>新建保护分支规则</Title>
        <Div>
          {helper(
            "设置分支/通配符",
            "sign",
            [{ required: true, message: "请输入分支/通配符" }],
            <Input placeholder="请输入分支名称或通配符规则" />,
            "setStyleRule"
          )}
          <p className="color-grey-8 mb20">
            例如：设置为“master”，则对名称为“master”的分支生效；设置为“*-stable“
            或 ”release*“，则对名称符合此通配符的所有保护分支生效。
          </p>
          {helper(
            "可推送代码成员",
            "psuhmember",
            [{ required: true, message: "请选择可推送代码成员" }],
            <Select placeholder="请选择仓库成员">
              <Option value="0">请选择仓库成员</Option>
              {getMember(list)}
            </Select>,
            "setSelectWidth"
          )}
          {helper(
            "可合并Pull Request成员",
            "pullmember",
            [{ required: true, message: "请选择可合并Pull Request成员" }],
            <Select placeholder="请选择仓库成员">
              <Option value="0">请选择仓库成员</Option>
              {getMember(list)}
            </Select>,
            "setSelectWidth"
          )}
          <div className="df pb30">
            <Button type="primary" onClick={saveBranchRule}>
              保存
            </Button>
            <Cancel
              className="ml30"
              onClick={() => {
                history.push(`/projects/${owner}/${projectsId}/setting/branch`);
              }}
            >
              取消
            </Cancel>
          </div>
        </Div>
      </WhiteBack>
    );
  })
);
