const { Tooltip, Form, Input, Button, Space, InputNumber, Select } = antd;

const { QuestionCircleOutlined,
MinusCircleOutlined,
PlusOutlined } = icons;

const { Option } = Select;

const CustomLabel = (text, tip) => (
<span>
{text}&nbsp;
<Tooltip title={tip}>
<QuestionCircleOutlined />
</Tooltip>
</span>
);

const SiblingComponent = ({ Form }) => {

const [expand, setExpand] = React.useState(false);
const [count, setCount] = React.useState(0);
const addBtn = React.useRef(null);
const rmvBtn = React.useRef(null);

React.useEffect(() => {
if (expand && !count) addBtn.current.click();

}, [expand, count]);
const onChange = e => {
if(!e)
for(let i =0; i < 10 ; i++)
{

rmvBtn.current.click();

}
setExpand(e);
};
return (
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
<Form.Item>
<Select
value={expand}
placeholder="Please select a country"
onChange={onChange}
>
<Option value={true}> Yes</Option>
<Option value={false}>No</Option>
</Select>
</Form.Item>
{
fields.map(field => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
 <Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input />
</Form.Item>

<Form.Item
{...field}
name={[field.name, "gender"]}
fieldKey={[field.fieldKey, "gender"]}
rules={[{ required: true, message: "Missing last name" }]}
>
<Select style={{ width: 120 }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
</Select>
</Form.Item>

<Form.Item
{...field}
name={[field.name, "age"]}
fieldKey={[field.fieldKey, "age"]}
rules={[{ required: true, message: "Missing last name" }]}
>
<InputNumber placeholder="Age" />
</Form.Item>

<MinusCircleOutlined
ref={rmvBtn}
onClick={() => {
remove(field.name);
setCount(count - 1);
}}
/>
</Space>
))}

{expand && (
<Form.Item>
<Button
ref={addBtn}
type="dashed"
onClick={() => {
add();
setCount(count + 1);
}}
block
>
<PlusOutlined /> Add sibling
</Button>
</Form.Item>
)}
</div>
);
}}
</Form.List>
 );
};

const FormFields = Form => [

{ name: SiblingComponent, props: { Form } },

{
name: Select,
formProps: {
name: ["user", "select"]
},
children: {
name: Option,
props: {
value: "A"
},
children: 'Option A'
}
},

{
name: Input,
formProps: {
label: CustomLabel("Save", "You must save!"),
name: ["user", "name"],
rules: [
{
required: true
}
]
},
props: {
placeholder: "Save"
}
}
];

const createField = (elt, Form) =>

React.createElement(
elt.name,
elt.props,
typeof elt.children === 'object' ? createField(elt.children, Form):
elt.children
);

const Demo = () => {

const onFinish = values => {
console.log("Received values of form:", values);
};

const onChangehandle = e => {

console.log(e);
};

return (
<Form
onFieldsChange={onChangehandle}
name="dynamic_form_nest_item"
onFinish={onFinish}
 autoComplete="off"
>
{FormFields(Form).map((elt, key) => (
<Form.Item {...elt.formProps} key={key}>
{createField(elt)}
</Form.Item>
))}
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};

ReactDOM.render(<Demo />, document.getElementById("container"));