import { App, defineComponent, onMounted, PropType, ref } from 'vue';
import FormAlias from 'ant-design-vue/es/form';
import 'ant-design-vue/es/form/style';
import config from './config';
// @ts-ignore
import style from './style/index.module.less';

const Form = defineComponent({
  name: 'AForm',
  inheritAttrs: false,
  props: {
    customMode: {
      type: String as PropType<'normal' | 'detail' | 'notRequired'>,
      default: 'normal'
    }
  },
  setup(props, { attrs, slots, expose }) {
    const rawFormRef = ref<Record<string, any> | undefined>();
    const _expose = {};
    expose(_expose);
    onMounted(() => {
      Object.assign(_expose, rawFormRef.value);
    });
    return () => (
      <FormAlias
        ref={rawFormRef}
        class={`${style['unity-form']} ${
          props.customMode !== 'normal'
            ? style[`unity-form-${props.customMode}`]
            : ''
        }`}
        {...config.props}
        {...attrs}
        v-slots={slots}
      />
    );
  }
});

export default Form as typeof Form & {
  install: (app: App, ...options: any[]) => any;
};
