import { Form, Input, InputNumber } from 'antd'
import React from 'react'

import InputCurrency from 'components/currency/Input'
import CurrencyValue from 'components/currency/Value'

interface EditableCellProps<T = any> extends React.HTMLAttributes<HTMLElement> {
  editing: boolean
  dataIndex: string
  title: any
  inputType: 'number' | 'currency' | 'text'
  record: T
  index: number
  children: React.ReactNode
}

function EditableCell<T = any>({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}: EditableCellProps<T>) {
  const inputNode =
    inputType === 'currency' ? (
      <InputCurrency style={{ width: '100%' }} />
    ) : inputType === 'number' ? (
      <InputNumber min={0} />
    ) : (
      <Input />
    )

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`
            }
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : inputType === 'currency' ? (
        <CurrencyValue
          value={record[dataIndex as keyof T] as string | number}
        />
      ) : (
        children
      )}
    </td>
  )
}

export default EditableCell