import { defineComponent as N, computed as d, ref as C, watch as K, resolveComponent as O, openBlock as s, createElementBlock as f, normalizeClass as z, unref as t, createBlock as g, mergeProps as k, isRef as v, createCommentVNode as j, createElementVNode as U, Fragment as A, renderList as P, createVNode as T } from "vue";
import { isArray as x, isString as I, isEqual as Y, isFunction as R } from "lodash-es";
import { a6 as q, a7 as G, a9 as H, ae as J, P as Q, o as y, ak as W, ar as X } from "./index-5a333c35.js";
import { m as Z } from "./mediaFilter-3fdbc89b.js";
import "axios";
import "@vueuse/core";
import "vue-i18n";
const _ = `.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}
`, ue = /* @__PURE__ */ N({
  __name: "KapixImageViewerInput",
  props: q([Array, String]),
  emits: ["update:modelValue"],
  setup(E, { emit: M }) {
    G("KapixImageViewerInput", _);
    const n = E, S = M, l = d({
      get() {
      },
      set(i) {
      }
    }), r = d({
      get() {
        return H(n);
      },
      set(i) {
        S("update:modelValue", i);
      }
    }), $ = {
      backgroundImage: X
    }, h = C(!1), V = C(!1), u = C(void 0), F = d(() => x(u.value) ? u.value : J), w = d(() => x(u.value) ? void 0 : u.value), c = d(() => x(r.value) || !!n.options.multiple), L = d(() => n.options.showStringInput !== !1 && !c.value && (r.value == null || I(r.value)));
    let b;
    function B(i) {
      return c.value;
    }
    function D(i) {
      i && (B() ? (u.value = i.map((e) => e.preview).filter((e) => e), b = i.map((e) => e.file).filter((e) => e), R(n.options.onFilesChange) && n.options.onFilesChange(i)) : (u.value = i.preview, b = i.file, R(n.options.onFilesChange) && n.options.onFilesChange(i)));
    }
    return typeof document < "u" && K(() => r.value, async (i) => {
      if (!Y(i, b)) {
        if (b = void 0, u.value = void 0, i instanceof File) {
          const e = new FileReader();
          e.readAsDataURL(i), e.onload = (o) => {
            u.value = o.target && o.target.result;
          };
        } else if (I(i))
          u.value = i;
        else if (x(i)) {
          const e = await Promise.all(i.map(async (o) => {
            if (I(o))
              return o;
            if (o instanceof File)
              return new Promise((a) => {
                const p = new FileReader();
                p.readAsDataURL(o), p.onload = (m) => {
                  a(m.target && m.target.result);
                }, p.onerror = (m) => {
                  a(void 0);
                };
              });
          }));
          u.value = e.filter((o) => o);
        }
      }
    }, { immediate: !0 }), (i, e) => {
      const o = O("kapix-uploadcare");
      return i.editable ? (s(), f("div", {
        key: 0,
        style: $,
        class: z([i.templateClass, "kapix-image-viewer-input"])
      }, [
        t(L) ? (s(), g(Q, k({ key: 0 }, n, {
          modelValue: t(r),
          "onUpdate:modelValue": e[0] || (e[0] = (a) => v(r) ? r.value = a : null),
          value: t(r),
          "template-class": void 0
        }), null, 16, ["modelValue", "value"])) : j("", !0),
        U("div", {
          class: "kapix-image-viewer-container",
          onMouseenter: e[3] || (e[3] = (a) => h.value = !0),
          onMouseout: e[4] || (e[4] = (a) => h.value = !1),
          onDragenter: e[5] || (e[5] = (a) => V.value = !0),
          onMouseleave: e[6] || (e[6] = (a) => V.value = !1)
        }, [
          t(c) ? (s(!0), f(A, { key: 0 }, P(t(F), (a, p) => (s(), g(y, k({ key: p }, n, {
            modelValue: t(l),
            "onUpdate:modelValue": e[1] || (e[1] = (m) => v(l) ? l.value = m : null),
            value: a,
            "lazy-value": a,
            "template-class": ""
          }), null, 16, ["modelValue", "value", "lazy-value"]))), 128)) : (s(), g(y, k({ key: 1 }, n, {
            modelValue: t(l),
            "onUpdate:modelValue": e[2] || (e[2] = (a) => v(l) ? l.value = a : null),
            "template-class": "",
            value: t(w),
            "lazy-value": t(w)
          }), null, 16, ["modelValue", "value", "lazy-value"]))
        ], 32),
        U("div", {
          class: z(["kapix-upload-actions-container", { dragging: t(V), hover: t(h) }])
        }, [
          T(o, {
            modelValue: t(r),
            "onUpdate:modelValue": e[7] || (e[7] = (a) => v(r) ? r.value = a : null),
            options: i.options,
            "is-multiple-files": t(c),
            pubkey: i.options.pubkey || t(W).UPLOADCARE_PUBLIC_KEY,
            "return-type": i.options.returnType,
            "media-filter": t(Z).IMAGE,
            accept: i.options.accept,
            "on-change": D
          }, null, 8, ["modelValue", "options", "is-multiple-files", "pubkey", "return-type", "media-filter", "accept"])
        ], 2)
      ], 2)) : t(c) ? (s(), f("div", {
        key: 1,
        class: z(["kapix-image-viewer-container", i.templateClass])
      }, [
        (s(!0), f(A, null, P(t(F), (a, p) => (s(), g(y, k({ key: p }, n, {
          modelValue: t(l),
          "onUpdate:modelValue": e[8] || (e[8] = (m) => v(l) ? l.value = m : null),
          value: a,
          "lazy-value": a,
          "template-class": ""
        }), null, 16, ["modelValue", "value", "lazy-value"]))), 128))
      ], 2)) : (s(), g(y, k({ key: 2 }, n, {
        modelValue: t(l),
        "onUpdate:modelValue": e[9] || (e[9] = (a) => v(l) ? l.value = a : null),
        value: t(w),
        "lazy-value": t(w)
      }), null, 16, ["modelValue", "value", "lazy-value"]));
    };
  }
});
export {
  ue as default
};
