import type { FormKitTypeDefinition } from "@formkit/core";

import {
  disablesChildren,
  renamesRadios,
  fieldset,
  messages,
  message,
  outer,
  legend,
  help,
  inner,
  prefix,
  $if,
  suffix,
} from "@formkit/inputs";
import {
  addButton,
  content,
  controls,
  down,
  downControl,
  downIcon,
  empty,
  insert,
  insertControl,
  insertIcon,
  item,
  items,
  remove,
  removeControl,
  removeIcon,
  up,
  upControl,
  upIcon,
} from "./sections";
import { i18n } from "@/locales";
import {
  IconAddCircle,
  IconArrowDownCircleLine,
  IconArrowUpCircleLine,
  IconCloseCircle,
} from "@halo-dev/components";
import AddButton from "./AddButton.vue";
import { lists } from "./features/lists";

/**
 * Input definition for a dynamic list input.
 * @public
 */
export const list: FormKitTypeDefinition = {
  /**
   * The actual schema of the input, or a function that returns the schema.
   */
  schema: outer(
    fieldset(
      legend("$label"),
      help("$help"),
      inner(
        prefix(),
        $if(
          "$value.length === 0",
          $if("$slots.empty", empty()),
          $if(
            "$slots.default",
            items(
              item(
                content("$slots.default"),
                controls(
                  up(upControl(upIcon())),
                  remove(removeControl(removeIcon())),
                  insert(insertControl(insertIcon())),
                  down(downControl(downIcon()))
                )
              )
            ),
            suffix()
          )
        ),
        suffix(),
        addButton(`$addLabel || (${i18n.global.t("core.common.buttons.add")})`)
      )
    ),
    messages(message("$message.value"))
  ),
  /**
   * The type of node, can be a list, group, or input.
   */
  type: "list",
  /**
   * An array of extra props to accept for this input.
   */
  props: [
    "min",
    "max",
    "upControl",
    "downControl",
    "removeControl",
    "insertControl",
    "addLabel",
    "addButton",
    "itemType",
  ],
  /**
   * Additional features that should be added to your input
   */
  features: [lists, disablesChildren, renamesRadios],

  library: {
    IconAddCircle,
    IconCloseCircle,
    IconArrowUpCircleLine,
    IconArrowDownCircleLine,
    AddButton,
  },
};