import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { defineComponent, computed, toRef } from 'vue';
import ImageInternal from '../vc-image';
import { imageProps } from '../vc-image/src/Image';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import PreviewGroup, { icons } from './PreviewGroup';
import { getTransitionName } from '../_util/transition';
import useStyle from './style';
import classNames from '../_util/classNames';
import 'vue/jsx-runtime';
import { usePlaceholderConfig } from './hooks/usePlaceholderConfig';
import Progress from './Progress';
const _imageProps = () => _extends(_extends({}, imageProps()), {
  placeholder: {
    type: Object,
    default: undefined
  },
  style: Object
});
export function mergeCover(cover, coverSlot) {
  if (cover === false) {
    return cover;
  }
  let placement = undefined;
  let coverNode = undefined;
  if (typeof cover === 'function') {
    placement = 'center';
    coverNode = cover;
  } else if (typeof cover === 'object') {
    placement = cover.placement;
    coverNode = cover.coverNode;
  } else {
    // case true
    placement = 'center';
  }
  return {
    placement,
    coverNode: coverNode || coverSlot
  };
}
const Image = defineComponent({
  name: 'AImage',
  inheritAttrs: false,
  props: _imageProps(),
  slots: Object,
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      rootPrefixCls
    } = useConfigInject('image', props);
    // Style
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const {
      placeholderConfig,
      showProgressOverlay,
      placeholderNode
    } = usePlaceholderConfig(toRef(props, 'placeholder'));
    const mergedPreview = computed(() => {
      const {
        preview
      } = props;
      if (preview === false) {
        return preview;
      }
      const _preview = typeof preview === 'object' ? preview : {};
      return _extends(_extends({
        icons
      }, _preview), {
        cover: mergeCover(_preview.cover, slots.cover),
        transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
        maskTransitionName: getTransitionName(rootPrefixCls.value, 'fade', _preview.maskTransitionName)
      });
    });
    return () => {
      var _a;
      const {
        width,
        height,
        style
      } = props;
      const shouldRenderPlaceholderOverlay = placeholderNode.value && !props.src;
      const {
        render: progressRender,
        percent
      } = ((_a = placeholderConfig.value) === null || _a === void 0 ? void 0 : _a.progressConfig) || {};
      const mergedProgressRender = shouldRenderPlaceholderOverlay ? () => placeholderNode.value : progressRender;
      if (showProgressOverlay.value || shouldRenderPlaceholderOverlay) {
        return _createVNode(Progress, {
          "prefixCls": prefixCls.value,
          "percent": percent,
          "render": mergedProgressRender,
          "width": width,
          "height": height,
          "classNames": {},
          "styles": {},
          "rootStyle": _extends({}, style || {}),
          "rootClassName": classNames(props.rootClassName, hashId.value)
        }, null);
      }
      return wrapSSR(_createVNode(ImageInternal, _objectSpread(_objectSpread({}, _extends(_extends(_extends({}, attrs), props), {
        prefixCls: prefixCls.value
      })), {}, {
        "preview": mergedPreview.value,
        "rootClassName": classNames(props.rootClassName, hashId.value)
      }), _extends({}, slots)));
    };
  }
});
export { imageProps };
Image.PreviewGroup = PreviewGroup;
Image.install = function (app) {
  app.component(Image.name, Image);
  app.component(Image.PreviewGroup.name, Image.PreviewGroup);
  return app;
};
export { PreviewGroup as ImagePreviewGroup };
export default Image;