import { FormKitTypeDefinition } from '@formkit/core';
import { actions, submitInput, forms, disablesChildren, createSection } from '@formkit/inputs';
import { messages } from '../sections/messages';
import PButton from 'primevue/button';
import { markRaw } from 'vue';

const formInput = createSection('form', () => ({
  $el: 'form',
  bind: '$attrs',
  meta: {
    autoAnimate: true,
  },
  attrs: {
    id: '$id',
    name: '$node.name',
    onSubmit: '$handlers.submit',
    'data-loading': '$state.loading || undefined',
  },
}));

export const form: FormKitTypeDefinition = {
  schema: formInput(
    '$slots.default',
    messages(),
    actions(submitInput()),
    createSection('button', () => ({
      $cmp: markRaw(PButton) as any,
      bind: '$submitAttrs',
      props: {
        type: 'submit',
        label: '$submitLabel',
      },
    }))(),
  ),
  type: 'group',
  props: [
    'submitLabel',
    'submitAttrs',
    'submitBehavior',
    'incompleteMessage', // 抱歉，部分字段未被正确填写。
  ],
  features: [forms, disablesChildren],
  // schemaMemoKey: 'rorzq1rsrf',
};