import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons'
import type { FormKitNode, FormKitOptions } from '@formkit/core'
import { createI18nPlugin, zh } from '@formkit/i18n'
import { genesisIcons } from '@formkit/icons'
import { createLibraryPlugin, submit, text } from '@formkit/inputs'
import { createProPlugin, toggle } from '@formkit/pro'
import * as defaultRules from '@formkit/rules'
import { createThemePlugin } from '@formkit/themes'
import { createValidationPlugin } from '@formkit/validation'
import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
// import { fkLibrary } from './formkit.config.fkLibrary'
// import { rootClasses } from "./formkit.config.theme"
import HeadlessuiToggle from "./src/headlessui-switch.vue"
import { register as decodeErrors } from '@formkit/dev'

decodeErrors();

const validation = createValidationPlugin(defaultRules)

const theme = undefined;
const icons = genesisIcons;

// const apiKey = 'fk-6cdd5192223'
export default {
  plugins: [
    // createProPlugin(apiKey, { toggle }),
    // createLibraryPlugin(fkLibrary),
    createLibraryPlugin({
      text,
      submit,
    }),
    // createLibraryPlugin(
    //   {
    //     'headlessuiSwitch': createInput(HeadlessuiToggle),
    //   }
    // ),
    createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */),
    bindings,
    createI18nPlugin({ zh }),
    validation,
    addAsteriskPlugin,

    // https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts
    createAutoHeightTextareaPlugin(),

    // https://auto-animate.formkit.com/#usage
    // https://github.com/formkit/auto-animate/
    // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
    createAutoAnimatePlugin(
      {
        duration: 250,
        easing: 'ease-in-out',
      },
      // {
      //   /* optional animation targets object */
      //   // default:
      //   global: ['outer', 'inner'],
      //   form: ['form'],
      //   repeater: ['items'],
      // }
    )
  ],
  config: {
    // rootClasses: false,
    // rootClasses,
    // rootClasses: (sectionName: string, node: FormKitNode) => {
    //   console.debug(`sectionName :>> `, sectionName);
    // }
  },
} satisfies FormKitOptions