import { defineComponent as U, ref as d, computed as y, resolveComponent as k, openBlock as s, createElementBlock as c, createElementVNode as p, createCommentVNode as S, renderSlot as u, createBlock as C, normalizeClass as f, toDisplayString as F, unref as B } from "vue";
import { useI18n as W } from "@feedmepos/mf-common";
import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const G = {
  key: 0,
  class: "relative"
}, H = ["accept", "disabled"], J = { class: "flex flex-col gap-8" }, K = ["accept", "disabled"], M = /* @__PURE__ */ U({
  __name: "FmDroppableField",
  props: {
    buttonLabel: {},
    label: { default: "" },
    disabled: { type: Boolean, default: !1 },
    accept: { default: "" },
    maxFileSize: { default: 8e6 },
    contentClass: {}
  },
  emits: ["file-upload", "file-rejected"],
  setup(T, { emit: V }) {
    const l = T, g = V, { t: r } = W(), t = d(!1), i = d(null), n = d(null), m = d(), R = (e) => {
      l.disabled || (e.stopPropagation(), e.preventDefault());
    }, $ = (e) => {
      l.disabled || (e.stopPropagation(), e.preventDefault(), t.value = !0);
    }, j = (e) => {
      l.disabled || (e.stopPropagation(), e.preventDefault(), t.value = !1);
    }, E = (e) => {
      var a;
      l.disabled || (e.stopPropagation(), e.preventDefault(), t.value = !1, h((a = e.dataTransfer) == null ? void 0 : a.files));
    };
    function h(e) {
      if (e)
        if (m.value = e, i.value = I(e[0]), n.value = P(e[0]), i.value && n.value)
          g("file-upload", e[0]);
        else {
          const a = L();
          g("file-rejected", [
            {
              file: e[0],
              reason: a
            }
          ]);
        }
    }
    const L = () => {
      const e = new Array();
      return i.value || e.push("invalid-type"), n.value || e.push("invalid-size"), e;
    }, I = (e) => {
      if (!l.accept) return !0;
      const a = l.accept.split(",").map((o) => o.trim());
      for (const o of a)
        if (w(o)) {
          if (D(o) === D(e.type)) return !0;
        } else if (A(e) === o || e.type === o) return !0;
      return !1;
    }, P = (e) => e.size <= l.maxFileSize * 1024 * 1024, w = (e) => e.indexOf("*") !== -1, A = (e) => "." + e.name.split(".").pop(), D = (e) => e.substring(0, e.indexOf("/")), O = y(() => {
      if (t.value) return r("inventory.formField.dropField.dropToUpload");
      if (i.value) {
        if (!n.value)
          return r("inventory.formField.dropField.fileSizeExceeded", { size: l.maxFileSize });
      } else return r("inventory.formField.dropField.invalidFileType");
      return "";
    }), v = y(() => m.value ? !i.value || !n.value : !1), _ = (e) => {
      const a = e.target;
      h(a.files);
    }, N = y(() => {
      var e;
      return (e = m.value) == null ? void 0 : e.item(0);
    }), b = d();
    return (e, a) => {
      const o = k("FmLabel"), x = k("FmButton");
      return s(), c("label", {
        class: "fm-droppable-field",
        ref_key: "fmButtonRef",
        ref: b
      }, [
        e.$slots.default ? (s(), c("div", G, [
          p("input", {
            accept: e.accept,
            disabled: e.disabled,
            class: "fm-droppable-field__input",
            type: "file",
            onChange: _
          }, null, 40, H)
        ])) : S("", !0),
        u(e.$slots, "default", {
          isDragging: t.value,
          isValidFileType: i.value,
          isValidFileSize: n.value,
          singleValidFile: N.value,
          openFileDialog: () => {
            var z;
            return console.log("click", b.value), (z = b.value) == null ? void 0 : z.click();
          }
        }, () => [
          p("div", J, [
            e.$slots.label ? u(e.$slots, "label", { key: 0 }, void 0, !0) : (s(), C(o, {
              key: 1,
              label: e.label
            }, null, 8, ["label"]))
          ]),
          p("div", {
            class: f([[
              e.contentClass ? e.contentClass : "w-full h-full",
              {
                "fm-droppable-field__container--dragging": t.value,
                "fm-droppable-field__container--invalid": v.value && !e.disabled,
                "fm-droppable-field__container--disabled": e.disabled
              }
            ], "fm-droppable-field__container"]),
            onDragenter: R,
            onDragleave: j,
            onDragover: $,
            onDrop: E
          }, [
            (t.value || v.value) && !e.disabled ? (s(), c("div", {
              key: 0,
              class: f({
                "fm-typo-en-body-lg-600": !0,
                "text-fm-color-primary": t.value,
                "text-fm-color-typo-error": v.value
              })
            }, F(O.value), 3)) : (s(), C(x, {
              key: 1,
              disabled: e.disabled,
              label: e.buttonLabel ?? "Add files",
              size: "md",
              variant: "secondary"
            }, null, 8, ["disabled", "label"])),
            u(e.$slots, "accept-text", {}, () => [
              l.accept ? (s(), c("div", {
                key: 0,
                class: f([[e.disabled ? "text-fm-color-typo-disabled" : "text-fm-color-typo-secondary"], "fm-typo-en-body-md-400"])
              }, F(B(r)("inventory.formField.dropField.accepts", { fileTypes: e.accept })), 3)) : S("", !0)
            ], !0),
            p("input", {
              accept: e.accept,
              disabled: e.disabled,
              class: "fm-droppable-field__input",
              type: "file",
              onChange: _
            }, null, 40, K)
          ], 34),
          u(e.$slots, "helper-text", {}, () => [
            p("div", {
              class: f([[e.disabled ? "text-fm-color-typo-disabled" : "text-fm-color-typo-secondary"], "fm-typo-en-body-sm-400"])
            }, F(B(r)("inventory.formField.dropField.maxSize", { size: e.maxFileSize })), 3)
          ], !0)
        ], !0)
      ], 512);
    };
  }
}), Z = /* @__PURE__ */ q(M, [["__scopeId", "data-v-2937afd0"]]);
export {
  Z as F
};
