import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
import type { FormKitOptions } from '@formkit/core';
import { register as decodeErrors } from '@formkit/dev';
import { createI18nPlugin, zh } from '@formkit/i18n';
import { createLibraryPlugin, submit, text } from '@formkit/inputs';
import * as defaultRules from '@formkit/rules';
import { createValidationPlugin } from '@formkit/validation';
import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@formkit/vue';
import type { App } from 'vue';
import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
import { debugPlugin } from './formkit.config.plugin.debug';
import { form } from '@/__fk-inputs__/inputs/form';

// const apiKey = 'fk-6cdd5192223'
const config: FormKitOptions = {
  plugins: [
    ...[
      // createProPlugin(apiKey, { toggle }),
      // createLibraryPlugin(fkLibrary),
      createLibraryPlugin({
        form,
        submit,
        text,
      }),
      // createLibraryPlugin(
      //   {
      //     'headlessuiSwitch': createInput(HeadlessuiToggle),
      //   }
      // ),
    ],
    // createThemePlugin(
    //   theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
    // ),
    bindings,
    createI18nPlugin({ zh }),
    createValidationPlugin(defaultRules),
    addAsteriskPlugin,
    createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */),
    createAutoAnimatePlugin(
      // 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
      {
        duration: 250,
        easing: 'ease-in-out',
      },
      {
        /* optional animation targets object */
        // default:
        global: ['outer', 'inner'],
        form: ['form'],
        repeater: ['items'],
      },
    ),
    debugPlugin,
  ],
  config: {
    // rootClasses: false,
    // rootClasses,
    // rootClasses: (sectionName: string, node: FormKitNode) => {
    //   console.debug(`sectionName :>> `, sectionName);
    // }
  },
};

export function setupFormKit(app: App) {
  decodeErrors();
  app.use(plugin, config);
  app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
}