import { defineComponent as E, provide as I, onMounted as S, watch as $, nextTick as A, openBlock as c, createElementBlock as f, normalizeStyle as C, unref as n, normalizeClass as l, renderSlot as d, toDisplayString as p, createCommentVNode as m, createElementVNode as y } from "vue";
import { injectFormKey as N } from "../../composables/keys.js";
import { useTheme as T } from "../../composables/useTheme.js";
const j = {
  key: 0,
  class: "mb-6"
}, w = ["disabled"], z = {
  autoValidate: {
    type: Boolean,
    default: !0
  },
  autoFocus: {
    type: Boolean,
    default: !0
  },
  disabled: Boolean,
  errors: {
    type: [Array, Object],
    default: () => []
  },
  title: String,
  description: String,
  hasFooter: {
    type: Boolean,
    default: !0
  }
}, D = {
  name: "XForm"
}, O = /* @__PURE__ */ E({
  ...D,
  props: z,
  emits: ["submit"],
  setup(h, { emit: b }) {
    const u = h, F = b, s = [];
    I(N, {
      registerInput: (e, t, o, i) => {
        const a = s.find((B) => B.name === e);
        a ? (a.focus = t, a.validate = o, a.setError = i) : s.push({ name: e, focus: t, validate: o, setError: i });
      },
      unregisterInput: (e) => {
        const t = s.findIndex((o) => o.name === e);
        s.splice(t, 1);
      },
      isInsideForm: !0
    }), S(async () => {
      u.autoFocus && s && s.length > 0 && setTimeout(s[0].focus, 50);
    }), $(() => u.errors, (e) => {
      e && A(() => {
        if (Array.isArray(e))
          e.forEach((t, o) => {
            const i = s.find((a) => a.name === t.field);
            i && (i.setError(t.msg), o === 0 && i.focus && i.focus());
          });
        else {
          const t = s.find((o) => o.name === e.field);
          t && (t.setError(e.msg), t.focus && t.focus());
        }
      });
    });
    const g = () => {
      let e = !0;
      return s.forEach((t) => {
        !t.validate() && e && (e = !1, t.focus && t.focus());
      }), e;
    }, V = (e) => {
      e.preventDefault(), e.stopPropagation();
      const t = u.autoValidate ? g() : !0;
      F("submit", t);
    }, { styles: k, classes: r, className: v } = T("Form", {}, u);
    return (e, t) => (c(), f("form", {
      style: C(n(k)),
      class: l([
        n(v),
        n(r).wrapper
      ]),
      onSubmit: V
    }, [
      d(e.$slots, "header", {}, () => [
        e.title || e.description ? (c(), f("div", j, [
          e.title ? (c(), f("p", {
            key: 0,
            class: l(n(r).title)
          }, p(e.title), 3)) : m("", !0),
          e.description ? (c(), f("p", {
            key: 1,
            class: l(n(r).description)
          }, p(e.description), 3)) : m("", !0)
        ])) : m("", !0)
      ]),
      y("fieldset", {
        disabled: e.disabled,
        class: l([n(r).content, "contents"])
      }, [
        d(e.$slots, "default")
      ], 10, w),
      e.hasFooter ? d(e.$slots, "footer", { key: 0 }, () => [
        y("div", {
          class: l(n(r).footer)
        }, [
          d(e.$slots, "primary-action"),
          d(e.$slots, "secondary-action")
        ], 2)
      ]) : m("", !0)
    ], 38));
  }
});
export {
  O as default
};
