import { defineComponent, computed, reactive, ref, watch, watchEffect, shallowRef, createVNode, Fragment } from 'vue';
import '../../../hooks/index.mjs';
import Preview from './Preview.mjs';
import { imageContext } from './context.mjs';
import { mergeDefaultValue } from './utils.mjs';
import { useMergedState } from '../../../hooks/use-merged-state/index.mjs';

function imageGroupProps() {
  return {
    previewPrefixCls: String,
    preview: {
      type: [Boolean, Object],
      default: true
    },
    icons: {
      type: Object,
      default: () => ({})
    }
  };
}
const Group = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "PreviewGroup",
  inheritAttrs: false,
  props: imageGroupProps(),
  setup(props, {
    slots
  }) {
    const preview = computed(() => {
      const defaultValues = {
        visible: void 0,
        onVisibleChange: () => {
        },
        getContainer: void 0,
        current: 0
      };
      return typeof props.preview === "object" ? mergeDefaultValue(props.preview, defaultValues) : defaultValues;
    });
    const previewUrls = reactive(/* @__PURE__ */ new Map());
    const current = ref();
    const previewVisible = computed(() => preview.value.visible);
    const getPreviewContainer = computed(() => preview.value.getContainer);
    const onPreviewVisibleChange = (val, preVal) => {
      var _a, _b;
      (_b = (_a = preview.value).onVisibleChange) == null ? void 0 : _b.call(_a, val, preVal);
    };
    const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible.value, {
      value: previewVisible,
      onChange: onPreviewVisibleChange
    });
    const mousePosition = ref(null);
    const isControlled = computed(() => previewVisible.value !== void 0);
    const previewUrlsKeys = computed(() => Array.from(previewUrls.keys()));
    const currentControlledKey = computed(() => previewUrlsKeys.value[preview.value.current]);
    const canPreviewUrls = computed(() => new Map(Array.from(previewUrls).filter(([, {
      canPreview
    }]) => !!canPreview).map(([id, {
      url
    }]) => [id, url])));
    const setPreviewUrls = (id, url, canPreview = true) => {
      previewUrls.set(id, {
        url,
        canPreview
      });
    };
    const setCurrent = (val) => {
      current.value = val;
    };
    const setMousePosition = (val) => {
      mousePosition.value = val;
    };
    const registerImage = (id, url, canPreview = true) => {
      const unRegister = () => {
        previewUrls.delete(id);
      };
      previewUrls.set(id, {
        url,
        canPreview
      });
      return unRegister;
    };
    const onPreviewClose = (e) => {
      e == null ? void 0 : e.stopPropagation();
      setShowPreview(false);
      setMousePosition(null);
    };
    watch(currentControlledKey, (val) => {
      setCurrent(val);
    }, {
      immediate: true,
      flush: "post"
    });
    watchEffect(() => {
      if (isShowPreview.value && isControlled.value)
        setCurrent(currentControlledKey.value);
    }, {
      flush: "post"
    });
    imageContext.provide({
      isPreviewGroup: shallowRef(true),
      previewUrls: canPreviewUrls,
      setPreviewUrls,
      current,
      setCurrent,
      setShowPreview,
      setMousePosition,
      registerImage
    });
    return () => {
      const {
        ...dialogProps
      } = preview.value;
      return createVNode(Fragment, null, [slots.default && slots.default(), createVNode(Preview, {
        ...dialogProps,
        "ria-hidden": !isShowPreview.value,
        "visible": isShowPreview.value,
        "prefixCls": props.previewPrefixCls,
        "onClose": onPreviewClose,
        "mousePosition": mousePosition.value,
        "src": canPreviewUrls.value.get(current.value),
        "icons": props.icons,
        "getContainer": getPreviewContainer.value
      }, null)]);
    };
  }
});

export { Group as default, imageGroupProps };
//# sourceMappingURL=PreviewGroup.mjs.map
