import type { FormKitNode, FormKitOptions } from '@formkit/core'
import { createI18nPlugin, zh } from '@formkit/i18n'
import { genesisIcons } from '@formkit/icons'
import { checkbox, createLibraryPlugin, form, group, range, submit, text, list, number, textarea } from '@formkit/inputs'
import * as defaultRules from '@formkit/rules'
import { createThemePlugin } from '@formkit/themes'
import { createValidationPlugin } from '@formkit/validation'
import { /* defaultConfig, */ bindings } from '@formkit/vue'
import { rootClasses } from "./formkit.theme"
import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons'

const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number, textarea, })
const validation = createValidationPlugin(defaultRules)
const i18n = createI18nPlugin({ zh })
const theme = undefined;
const icons = genesisIcons;
const themePlugin = createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */)


const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
function addAsteriskPlugin(node: FormKitNode) {
  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;

  node.on('created', () => {
    const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';

    console.group(node.props.label || node.props.submitLabel)
    console.debug(`node :>> `, node);
    console.debug(`node.props.definition :>> `, node.props.definition);
    // if (typeof node.props.definition!.schema === 'function') {
    //   console.debug(`node.props.definition.schema.call :>> `, node.props.definition!.schema.call(node.props.definition, {}));
    // }
    console.debug(`legendOrLabel :>> `, legendOrLabel);
    console.groupEnd()

    if (node.props.definition?.schemaMemoKey) {
      node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
    };

    const schemaFn = node.props.definition!.schema!;
    node.props.definition!.schema = (sectionsSchema = {}) => {
      sectionsSchema[legendOrLabel] = {
        children: ['$label', {
          $el: 'span',
          if: '$state.required',
          attrs: {
            class: '$classes.asterisk',
          },
          children: ['*']
        }]
      }

      return typeof schemaFn === 'function' ? schemaFn(sectionsSchema) : schemaFn
    }
  })
}

export default {
  plugins: [
    library, themePlugin, bindings, i18n, 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 },
} satisfies FormKitOptions