import React from 'react';
import AntdForm from 'antd/es/form';
import { FormContext } from 'antd/es/form/context';
import classnames from 'classnames';

import { ConfigConsumer } from '../config-provider';

class FormItem extends React.Component {
  renderFormItem = ({ getPrefixCls, antPrefix }) => {
    const {
      className,
      prefixCls: customizePrefixCls,
      labelCol,
      wrapperCol,
      ...restProps
    } = this.props;
    const prefixCls = getPrefixCls('form', customizePrefixCls);
    return (
      <FormContext.Consumer>
        {({ labelCol: contextLablelCol, wrapperCol: contextWrapperCol }) => {
          const mergedLabelCol = labelCol || contextLablelCol || {};
          const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
          return (
            <AntdForm.Item
              prefixCls={prefixCls}
              labelCol={{ prefixCls: `${antPrefix}-col`, ...mergedLabelCol }}
              wrapperCol={{
                prefixCls: `${antPrefix}-col`,
                ...mergedWrapperCol,
              }}
              {...restProps}
              className={classnames(`${antPrefix}-row`, className)}
            />
          );
        }}
      </FormContext.Consumer>
    );
  };

  render() {
    return <ConfigConsumer>{this.renderFormItem}</ConfigConsumer>;
  }
}

export default FormItem;