import { useMemo } from "react";
import { Form, Input, Radio } from 'antd';

const UpdateNodeForm = (props) => {
  const {form, type, node} = props;

  const radioDisable = useMemo(() => {
    return !node;
  }, [node])

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
  };

  return (
    <Form 
      {...formItemLayout}
      form={form}
    >
      {
        type==='add'&&<Form.Item label="目录类型" name="action">
          <Radio.Group disabled={radioDisable} >
            <Radio value='root'>根目录</Radio>
            <Radio value='sub'>子目录</Radio>
          </Radio.Group>
        </Form.Item>
      }
      <Form.Item 
        label="名称" 
        name="name"
        rules={[{ required: true, message: '请输入名称!' }]}
        >
        <Input />
      </Form.Item>
      <Form.Item 
        label="描述" 
        name="comment"
        rules={[{ required: true, message: '请输入描述!' }]}
        >
        <Input />
      </Form.Item>
    </Form>
  );
}

export default UpdateNodeForm;