import React from 'react';
import AntdForm, { FormInstance } from 'antd/es/form';

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

const InternalForm = (props, ref) => {
  return (
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const {
          prefixCls: customizePrefixCls,
          labelCol,
          wrapperCol,
          ...restProps
        } = props;
        const prefixCls = getPrefixCls('form', customizePrefixCls);
        return (
          <AntdForm
            ref={ref}
            prefixCls={prefixCls}
            labelCol={{ prefixCls: 'quanta-col' }}
            labelCol={labelCol}
            wrapperCol={wrapperCol}
            {...restProps}
          />
        );
      }}
    </ConfigConsumer>
  );
};

const Form = React.forwardRef(InternalForm);

const FormList = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('form', customizePrefixCls);
      return <AntdForm.List prefixCls={prefixCls} {...restProps} />;
    }}
  </ConfigConsumer>
);

const FormProvider = props => <AntdForm.FormProvider {...props} />;

Form.Item = FormItem;
Form.List = FormList;
Form.Provider = FormProvider;
Form.useForm = AntdForm.useForm;

export { FormInstance };

export default Form;