import { Form, Input } from 'antd'
import { NamePath, Rule } from 'rc-field-form/lib/interface'

type EditableCellProps = {
  editing?: boolean
  dataIndex?: NamePath
  input?: React.Component
  isRequired?: boolean
  title: string
  formItemClass?: string
  formItemRules?: Rule[]
  children: React.ReactNode
  initialValue: any
}

export const EditableCell = ({
  editing,
  dataIndex,
  input,
  isRequired,
  title,
  formItemClass,
  formItemRules,
  children,
  initialValue,
}: EditableCellProps) => (
  <td style={editing ? { padding: 0 } : undefined}>
    {!editing ? children : (
      <Form.Item
        name={dataIndex}
        style={{ margin: 0 }}
        className={formItemClass}
        rules={formItemRules ?? [{
          required: isRequired,
          message: `Please Input ${title}!`,
        }]}
        initialValue={initialValue}
      >
        {input ?? <Input/>}
      </Form.Item>
    )}
  </td>
)