import type { FormKitTypeDefinition } from '@formkit/core';
import type { FormKitInputs } from '@formkit/inputs';
import { casts, createSection, label, outer } from '@formkit/inputs';
import SchemaComponent from 'primevue/inputtext';
import { markRaw } from 'vue';
import { floatLabel } from '../sections/floatLabel';
import { messages } from '../sections/messages';

const input = createSection('input', () => ({
  $cmp: markRaw(SchemaComponent) as never,
  bind: '$attrs',
  props: {
    invalid: '$state.invalid',
    type: '$type',
    disabled: '$disabled',
    name: '$node.name',
    onInput: '$handlers.DOMInput',
    onBlur: '$handlers.blur',
    modelValue: '$_value',
    id: '$id',
    fluid: true,
  },
}));

export const PInputText: FormKitTypeDefinition = {
  type: 'input',
  schema: outer(
    floatLabel(
      input(), //
      label('$label'),
    ),
    messages(),
  ),
  features: [casts],
  // schemaMemoKey: 'g2f31c24kjh', // Math.random().toString(36).substring(2, 15)
};

declare module '@formkit/inputs' {
  // https://formkit.com/essentials/custom-inputs#typescript-support
  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
    PInputText: {
      type: 'PInputText';
    };
  }
}