import React from 'react';
import { Form } from 'antd';
import { UserForm } from './UserForm';
import { RoleSelect } from './RoleSelect';

export const EditableMembershipCell = ({
  editing,
  dataIndex,
  title,
  record,
  children,
  ...restProps
}) => {
  let inputNode;

  if (dataIndex === 'role') {
    inputNode = <RoleSelect />;
  } else if (dataIndex === 'user') {
    inputNode = (
      <UserForm
        nameProps={{ name: ['user', 'name'] }}
        emailProps={{ name: ['user', 'email'] }}
      />
    );
  }

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[{ required: true, message: `请输入${title}!` }]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};