import { defineComponent as D, computed as d, ref as C, watch as N, resolveComponent as K, openBlock as u, createElementBlock as x, normalizeClass as z, unref as i, createBlock as k, mergeProps as g, isRef as v, createCommentVNode as O, createElementVNode as A, Fragment as P, renderList as R, createVNode as j } from "vue";
import { isArray as f, isString as I, isEqual as T } from "lodash-es";
import { a6 as Y, a7 as q, a9 as G, ae as H, P as J, o as y, ak as Q, ar as W } from "./index-1e3e8095.js";
import { m as X } from "./mediaFilter-3fdbc89b.js";
import "axios";
import "@vueuse/core";
import "vue-i18n";
const Z = `.kapix-image-viewer-input{width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:auto}.kapix-image-viewer-input::-webkit-scrollbar-thumb{background-color:currentColor;border-radius:9px;border:solid 6px transparent;background-clip:content-box}.kapix-image-viewer-input::-webkit-scrollbar-thumb:hover{border-width:5px}.kapix-image-viewer-input::-webkit-scrollbar{height:18px;width:18px}@media (max-width: 599.98px){.kapix-image-viewer-input::-webkit-scrollbar{height:0;width:0}}.kapix-image-viewer-input::-webkit-scrollbar:disabled{display:none}.kapix-image-viewer-input::-webkit-scrollbar-button,.kapix-image-viewer-input ::-webkit-scrollbar-corner{cursor:pointer;background:transparent}.kapix-image-viewer-input::-webkit-scrollbar-button:horizontal:decrement,.kapix-image-viewer-input::-webkit-scrollbar-button:horizontal:increment,.kapix-image-viewer-input::-webkit-scrollbar-button:vertical:decrement,.kapix-image-viewer-input::-webkit-scrollbar-button:vertical:increment{display:none}.kapix-image-viewer-input::-webkit-scrollbar-button:vertical:start:increment,.kapix-image-viewer-input::-webkit-scrollbar-button:vertical:end:decrement,.kapix-image-viewer-input::-webkit-scrollbar-button:horizontal:start:increment,.kapix-image-viewer-input::-webkit-scrollbar-button:horizontal:end:decrement{display:none}.kapix-image-viewer-input::-webkit-scrollbar-track{background:transparent}.kapix-image-viewer-input::-webkit-scrollbar-thumb:vertical{min-height:50px}.kapix-image-viewer-input::-webkit-scrollbar-thumb:horizontal{min-width:50px}.kapix-image-viewer-input .kapix-field-input{height:auto}.kapix-image-viewer-container{width:100%;height:100%;min-width:0;min-height:0;position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.kapix-image-viewer-container>img{flex-basis:350px}.kapix-upload-actions-container{width:100%;height:100%;min-width:0;min-height:0;pointer-events:none;opacity:0;background:rgba(128,128,128,.3);border:2px dashed white;border-radius:8px;display:flex;position:absolute;justify-content:center;align-items:center;transition:opacity .2s ease-in;top:0;left:0}.kapix-upload-actions-container *{pointer-events:auto}.kapix-upload-actions-container:hover,.kapix-upload-actions-container.dragging,.kapix-upload-actions-container.hover{opacity:1}
`, oe = /* @__PURE__ */ D({
  __name: "KapixImageViewerInput",
  props: Y([Array, String]),
  emits: ["update:modelValue"],
  setup(E, { emit: F }) {
    q("KapixImageViewerInput", Z);
    const p = E, M = F, l = d({
      get() {
      },
      set(e) {
      }
    }), n = d({
      get() {
        return G(p);
      },
      set(e) {
        M("update:modelValue", e);
      }
    }), S = {
      backgroundImage: W
    }, h = C(!1), V = C(!1), o = C(void 0), U = d(() => f(o.value) ? o.value : H), w = d(() => f(o.value) ? void 0 : o.value), c = d(() => f(n.value) || !!p.options.multiple), $ = d(() => p.options.showStringInput !== !1 && !c.value && (n.value == null || I(n.value)));
    let b;
    function L(e) {
      return c.value;
    }
    function B(e) {
      e && (L() ? (o.value = e.previews, b = e.files) : (o.value = e.preview, b = e.file));
    }
    return typeof document < "u" && N(() => n.value, async (e) => {
      if (!T(e, b)) {
        if (b = void 0, o.value = void 0, e instanceof File) {
          const t = new FileReader();
          t.readAsDataURL(e), t.onload = (r) => {
            o.value = r.target && r.target.result;
          };
        } else if (I(e))
          o.value = e;
        else if (f(e)) {
          const t = await Promise.all(e.map(async (r) => {
            if (I(r))
              return r;
            if (r instanceof File)
              return new Promise((a) => {
                const s = new FileReader();
                s.readAsDataURL(r), s.onload = (m) => {
                  a(m.target && m.target.result);
                }, s.onerror = (m) => {
                  a(void 0);
                };
              });
          }));
          o.value = t.filter((r) => r);
        }
      }
    }, { immediate: !0 }), (e, t) => {
      const r = K("kapix-uploadcare");
      return e.editable ? (u(), x("div", {
        key: 0,
        style: S,
        class: z([e.templateClass, "kapix-image-viewer-input"])
      }, [
        i($) ? (u(), k(J, g({ key: 0 }, p, {
          modelValue: i(n),
          "onUpdate:modelValue": t[0] || (t[0] = (a) => v(n) ? n.value = a : null),
          value: i(n),
          "template-class": void 0
        }), null, 16, ["modelValue", "value"])) : O("", !0),
        A("div", {
          class: "kapix-image-viewer-container",
          onMouseenter: t[3] || (t[3] = (a) => h.value = !0),
          onMouseout: t[4] || (t[4] = (a) => h.value = !1),
          onDragenter: t[5] || (t[5] = (a) => V.value = !0),
          onMouseleave: t[6] || (t[6] = (a) => V.value = !1)
        }, [
          i(c) ? (u(!0), x(P, { key: 0 }, R(i(U), (a, s) => (u(), k(y, g({ key: s }, p, {
            modelValue: i(l),
            "onUpdate:modelValue": t[1] || (t[1] = (m) => v(l) ? l.value = m : null),
            value: a,
            "lazy-value": a,
            "template-class": ""
          }), null, 16, ["modelValue", "value", "lazy-value"]))), 128)) : (u(), k(y, g({ key: 1 }, p, {
            modelValue: i(l),
            "onUpdate:modelValue": t[2] || (t[2] = (a) => v(l) ? l.value = a : null),
            "template-class": "",
            value: i(w),
            "lazy-value": i(w)
          }), null, 16, ["modelValue", "value", "lazy-value"]))
        ], 32),
        A("div", {
          class: z(["kapix-upload-actions-container", { dragging: i(V), hover: i(h) }])
        }, [
          j(r, {
            modelValue: i(n),
            "onUpdate:modelValue": t[7] || (t[7] = (a) => v(n) ? n.value = a : null),
            options: e.options,
            "is-multiple-files": i(c),
            pubkey: e.options.pubkey || i(Q).UPLOADCARE_PUBLIC_KEY,
            "return-type": e.options.returnType,
            "media-filter": i(X).IMAGE,
            accept: e.options.accept,
            "on-change": B
          }, null, 8, ["modelValue", "options", "is-multiple-files", "pubkey", "return-type", "media-filter", "accept"])
        ], 2)
      ], 2)) : i(c) ? (u(), x("div", {
        key: 1,
        class: z(["kapix-image-viewer-container", e.templateClass])
      }, [
        (u(!0), x(P, null, R(i(U), (a, s) => (u(), k(y, g({ key: s }, p, {
          modelValue: i(l),
          "onUpdate:modelValue": t[8] || (t[8] = (m) => v(l) ? l.value = m : null),
          value: a,
          "lazy-value": a,
          "template-class": ""
        }), null, 16, ["modelValue", "value", "lazy-value"]))), 128))
      ], 2)) : (u(), k(y, g({ key: 2 }, p, {
        modelValue: i(l),
        "onUpdate:modelValue": t[9] || (t[9] = (a) => v(l) ? l.value = a : null),
        value: i(w),
        "lazy-value": i(w)
      }), null, 16, ["modelValue", "value", "lazy-value"]));
    };
  }
});
export {
  oe as default
};
