import { defineComponent, ref, computed, mergeProps, withCtx, unref, createTextVNode, toDisplayString, watch, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate } from 'vue/server-renderer';
import { B as BasicButton } from './BasicButton-7YIRCRg8.mjs';
import { a as useConfigStore, _ as __nuxt_component_0 } from './server.mjs';
import { CircleStencil } from 'vue-advanced-cropper';
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';

const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "PictureEditor",
  __ssrInlineRender: true,
  props: {
    src: {},
    aspectRatio: { default: 1 },
    initialSize: {},
    round: { type: Boolean, default: false },
    movable: { type: Boolean, default: true },
    resizable: { type: Boolean, default: true },
    outputSize: {},
    quality: { default: 0.92 },
    mime: { default: "image/jpeg" }
  },
  emits: ["onCropped"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const cropperRef = ref(null);
    function needsCacheBust(u) {
      if (!u) return false;
      const lower = u.toLowerCase();
      return lower.startsWith("http://") || lower.startsWith("https://");
    }
    computed(() => {
      const src = props.src ?? "";
      if (!needsCacheBust(src)) return src;
      const sep = src.includes("?") ? "&" : "?";
      return `${src}${sep}cb=${Date.now()}`;
    });
    computed(() => props.round ? CircleStencil : void 0);
    computed(() => {
      if (props.initialSize == null) return void 0;
      if (typeof props.initialSize === "number") {
        return { width: props.initialSize, height: props.initialSize };
      }
      return props.initialSize;
    });
    const forceKey = ref(0);
    watch(() => [props.aspectRatio, props.round], () => {
      forceKey.value++;
    });
    function getOutputSize() {
      if (props.outputSize == null) return void 0;
      if (typeof props.outputSize === "number") {
        return { width: props.outputSize, height: props.outputSize };
      }
      return props.outputSize;
    }
    function crop() {
      const c = cropperRef.value;
      if (!c) return;
      const size = getOutputSize() ?? void 0;
      const result = c.getResult({
        size,
        mime: props.mime,
        quality: props.quality
      });
      if (result?.canvas) {
        emit("onCropped", result.canvas.toDataURL(props.mime, props.quality));
      }
    }
    function setStencilSize(width, height) {
      forceKey.value++;
    }
    __expose({ crop, setStencilSize });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = __nuxt_component_0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "cropper-wrapper" }, _attrs))}>`);
      _push(ssrRenderComponent(_component_ClientOnly, null, {}, _parent));
      _push(`</div>`);
    };
  }
});
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/PictureEditor.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const PictureEditor = Object.assign(_sfc_main$1, { __name: "PictureEditor" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "CropperModal",
  __ssrInlineRender: true,
  props: {
    visible: { type: Boolean },
    img: {},
    mode: {},
    fixedMovable: { type: Boolean },
    resizable: { type: Boolean },
    aspectRatio: {},
    initialSize: {},
    round: { type: Boolean },
    outputSize: {},
    mime: {},
    quality: {}
  },
  emits: ["update:visible", "cropped"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const config = useConfigStore();
    const cropper = ref(null);
    const open = computed({
      get: () => props.visible,
      set: (val) => emit("update:visible", val)
    });
    const aspectRatio = computed(() => props.aspectRatio ?? null);
    const initialSize = computed(() => {
      return props.mode === "fixed" ? props.initialSize ?? 340 : void 0;
    });
    const round = computed(() => props.round ?? false);
    const outputSize = computed(() => props.outputSize ?? 400);
    const mime = computed(() => props.mime ?? "image/jpeg");
    const quality = computed(() => props.quality ?? 0.92);
    const isResizable = computed(() => {
      if (typeof props.resizable === "boolean") return props.resizable;
      return (props.mode ?? "free") !== "fixed";
    });
    const isMovable = computed(() => {
      if ((props.mode ?? "free") === "fixed") {
        return props.fixedMovable;
      }
      return true;
    });
    function onCropped(val) {
      emit("cropped", val);
      open.value = false;
    }
    function handleSave() {
      cropper.value?.crop();
    }
    return (_ctx, _push, _parent, _attrs) => {
      if (open.value && _ctx.img) {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "fixed inset-0 z-1000 backdrop-blur-md bg-black/80 p-2" }, _attrs))} data-v-cbfb9555><div class="w-full" data-v-cbfb9555>`);
        _push(ssrRenderComponent(PictureEditor, {
          ref_key: "cropper",
          ref: cropper,
          class: "h-90vh absolute top-0 right-0 left-0 sm:right-auto sm:left-auto w-full sm:w-fit sm:justify-self-center",
          src: _ctx.img,
          initialSize: initialSize.value,
          round: round.value,
          resizable: isResizable.value,
          movable: isMovable.value,
          aspectRatio: aspectRatio.value,
          outputSize: outputSize.value,
          mime: mime.value,
          quality: quality.value,
          onOnCropped: onCropped
        }, null, _parent));
        _push(`</div><div class="p-2 absolute bottom-0 right-0 left-0 grid gap-2 gap-2 sm:w-50vw sm:justify-self-center sm:flex" data-v-cbfb9555>`);
        _push(ssrRenderComponent(BasicButton, {
          block: "",
          onClick: handleSave,
          type: "primary"
        }, {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`${ssrInterpolate(unref(config).useString("submit"))}`);
            } else {
              return [
                createTextVNode(toDisplayString(unref(config).useString("submit")), 1)
              ];
            }
          }),
          _: 1
        }, _parent));
        _push(ssrRenderComponent(BasicButton, {
          block: "",
          danger: "",
          onClick: ($event) => open.value = false,
          class: "sm:!w-3/4"
        }, {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`${ssrInterpolate(unref(config).useString("close"))}`);
            } else {
              return [
                createTextVNode(toDisplayString(unref(config).useString("close")), 1)
              ];
            }
          }),
          _: 1
        }, _parent));
        _push(`</div></div>`);
      } else {
        _push(`<!---->`);
      }
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/CropperModal.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const __nuxt_component_3 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main, [["__scopeId", "data-v-cbfb9555"]]), { __name: "CropperModal" });

export { __nuxt_component_3 as _ };