import React, { useContext } from 'react';
import { ConfigProvider, Form as AntdForm } from 'antd';
import classNames from 'classnames';
import { ErrorListProps } from 'antd/lib/form/ErrorList';
import { FormProviderProps } from 'antd/lib/form/context';
import { FormListProps } from 'antd/lib/form/FormList';
import type { FormItemProps, FormProps, FormInstance } from 'antd';
import './index.less';

const Form = (
  props: FormProps & {
    children?: React.ReactNode;
  } & {
    ref?: React.Ref<FormInstance> | undefined;
  },
) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-form');

  return (
    <AntdForm
      {...props}
      className={classNames(`${prefixCls}`, props.className)}
    ></AntdForm>
  );
};

Form.Item = (props: FormItemProps) => {
  return <AntdForm.Item {...props}></AntdForm.Item>;
};
Form.List = (props: FormListProps) => {
  return <AntdForm.List {...props}></AntdForm.List>;
};
Form.ErrorList = (props: ErrorListProps) => {
  return <AntdForm.ErrorList {...props}></AntdForm.ErrorList>;
};
Form.Provider = (props: FormProviderProps) => {
  return <AntdForm.Provider {...props}></AntdForm.Provider>;
};

Form.useForm = AntdForm.useForm;
Form.useFormInstance = AntdForm.useFormInstance;
Form.useWatch = AntdForm.useWatch;
// @ts-ignore
Form.Item.useStatus = AntdForm.Item.useStatus;

export { Form };