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

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

export const PInputPassword: FormKitTypeDefinition = {
  type: 'input',
  schema: outer(
    floatLabel(
      input(), //
      label('$label'),
    ),
    messages(),
  ),
  features: [casts],
  schemaMemoKey: '9h771fci93n', // 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>> {
    PInputPassword: {
      type: 'PInputPassword';
    };
  }
}