import { bq as defineComponent, r as ref, en as useMouseInElement, w as watch, E as computed, c as createElementBlock, d as openBlock, q as createCommentVNode, e as createBaseVNode, G as normalizeStyle, u as toDisplayString } from "./vendor-other-DdEHkzYa.js";
const _hoisted_1 = { key: 0 };
const _hoisted_2 = ["src", "alt"];
const _hoisted_3 = ["src", "alt"];
const _hoisted_4 = {
  key: 1,
  class: "flex size-full items-center justify-center"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "WidgetImageCompare",
  props: {
    widget: {}
  },
  setup(__props) {
    const props = __props;
    const containerRef = ref(null);
    const sliderPosition = ref(50);
    const { elementX, elementWidth, isOutside } = useMouseInElement(containerRef);
    watch([elementX, elementWidth, isOutside], ([x, width, outside]) => {
      if (!outside && width > 0) {
        sliderPosition.value = Math.max(0, Math.min(100, x / width * 100));
      }
    });
    const beforeImage = computed(() => {
      const value = props.widget.value;
      return typeof value === "string" ? value : value?.before || "";
    });
    const afterImage = computed(() => {
      const value = props.widget.value;
      return typeof value === "string" ? "" : value?.after || "";
    });
    const beforeAlt = computed(() => {
      const value = props.widget.value;
      return typeof value === "object" && value?.beforeAlt ? value.beforeAlt : "Before image";
    });
    const afterAlt = computed(() => {
      const value = props.widget.value;
      return typeof value === "object" && value?.afterAlt ? value.afterAlt : "After image";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "relative size-full min-h-32 overflow-hidden"
      }, [
        beforeImage.value || afterImage.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
          afterImage.value ? (openBlock(), createElementBlock("img", {
            key: 0,
            src: afterImage.value,
            alt: afterAlt.value,
            draggable: "false",
            class: "size-full object-contain"
          }, null, 8, _hoisted_2)) : createCommentVNode("", true),
          beforeImage.value ? (openBlock(), createElementBlock("img", {
            key: 1,
            src: beforeImage.value,
            alt: beforeAlt.value,
            draggable: "false",
            class: "absolute inset-0 size-full object-contain",
            style: normalizeStyle({ clipPath: `inset(0 ${100 - sliderPosition.value}% 0 0)` })
          }, null, 12, _hoisted_3)) : createCommentVNode("", true),
          createBaseVNode("div", {
            class: "pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white shadow-md",
            style: normalizeStyle({ left: `${sliderPosition.value}%` }),
            role: "presentation"
          }, null, 4)
        ])) : (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(_ctx.$t("imageCompare.noImages")), 1))
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=WidgetImageCompare-Bvg3Od2A.js.map
