"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("../../../../../../vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const isNativeLazyLoad = require("../../_utils/env/is-native-lazy-load.js");
const utils = require("../../image/src/utils.js");
const Tag = require("../../tag/src/Tag.js");
const context = require("./context.js");
const index_cssr = require("./styles/index.cssr.js");
const useConfig = require("../../_mixins/use-config.js");
const useTheme = require("../../_mixins/use-theme.js");
const createKey = require("../../_utils/cssr/create-key.js");
const useCssVarsClass = require("../../_mixins/use-css-vars-class.js");
const colorToClass = require("../../_utils/css/color-to-class.js");
const resolveSlot = require("../../_utils/vue/resolve-slot.js");
const light = require("../styles/light.js");
const VResizeObserver = require("../../../../../../vueuc@0.4.51_vue@3.3.4/node_modules/vueuc/es/resize-observer/src/VResizeObserver.js");
const runtimeCore_esmBundler = require("../../../../../../@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
const reactivity_esmBundler = require("../../../../../../@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
const avatarProps = Object.assign(Object.assign({}, useTheme.default.props), {
  size: [String, Number],
  src: String,
  circle: {
    type: Boolean,
    default: void 0
  },
  objectFit: String,
  round: {
    type: Boolean,
    default: void 0
  },
  bordered: {
    type: Boolean,
    default: void 0
  },
  onError: Function,
  fallbackSrc: String,
  intersectionObserverOptions: Object,
  lazy: Boolean,
  onLoad: Function,
  renderPlaceholder: Function,
  renderFallback: Function,
  imgProps: Object,
  /** @deprecated */
  color: String
});
const NAvatar = runtimeCore_esmBundler.defineComponent({
  name: "Avatar",
  props: avatarProps,
  setup(props) {
    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig.default(props);
    const hasLoadErrorRef = reactivity_esmBundler.ref(false);
    let memoedTextHtml = null;
    const textRef = reactivity_esmBundler.ref(null);
    const selfRef = reactivity_esmBundler.ref(null);
    const fitTextTransform = () => {
      const { value: textEl } = textRef;
      if (textEl) {
        if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
          memoedTextHtml = textEl.innerHTML;
          const { value: selfEl } = selfRef;
          if (selfEl) {
            const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl;
            const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl;
            const radix = 0.9;
            const ratio = Math.min(elWidth / textWidth * radix, elHeight / textHeight * radix, 1);
            textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`;
          }
        }
      }
    };
    const NAvatarGroup = runtimeCore_esmBundler.inject(context.avatarGroupInjectionKey, null);
    const mergedSizeRef = runtimeCore_esmBundler.computed(() => {
      const { size } = props;
      if (size)
        return size;
      const { size: avatarGroupSize } = NAvatarGroup || {};
      if (avatarGroupSize)
        return avatarGroupSize;
      return "medium";
    });
    const themeRef = useTheme.default("Avatar", "-avatar", index_cssr.default, light.default, props, mergedClsPrefixRef);
    const TagInjection = runtimeCore_esmBundler.inject(Tag.tagInjectionKey, null);
    const mergedRoundRef = runtimeCore_esmBundler.computed(() => {
      if (NAvatarGroup)
        return true;
      const { round, circle } = props;
      if (round !== void 0 || circle !== void 0)
        return round || circle;
      if (TagInjection) {
        return TagInjection.roundRef.value;
      }
      return false;
    });
    const mergedBorderedRef = runtimeCore_esmBundler.computed(() => {
      if (NAvatarGroup)
        return true;
      return props.bordered || false;
    });
    const handleError = (e) => {
      var _a;
      if (!shouldStartLoadingRef.value)
        return;
      hasLoadErrorRef.value = true;
      const { onError, imgProps } = props;
      (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
      if (onError) {
        onError(e);
      }
    };
    runtimeCore_esmBundler.watch(() => props.src, () => hasLoadErrorRef.value = false);
    const cssVarsRef = runtimeCore_esmBundler.computed(() => {
      const size = mergedSizeRef.value;
      const round = mergedRoundRef.value;
      const bordered = mergedBorderedRef.value;
      const { color: propColor } = props;
      const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
      let height;
      if (typeof size === "number") {
        height = `${size}px`;
      } else {
        height = themeRef.value.self[createKey.createKey("height", size)];
      }
      return {
        "--n-font-size": fontSize,
        "--n-border": bordered ? border : "none",
        "--n-border-radius": round ? "50%" : borderRadius,
        "--n-color": propColor || color,
        "--n-color-modal": propColor || colorModal,
        "--n-color-popover": propColor || colorPopover,
        "--n-bezier": cubicBezierEaseInOut,
        "--n-merged-size": `var(--n-avatar-size-override, ${height})`
      };
    });
    const themeClassHandle = inlineThemeDisabled ? useCssVarsClass.useThemeClass("avatar", runtimeCore_esmBundler.computed(() => {
      const size = mergedSizeRef.value;
      const round = mergedRoundRef.value;
      const bordered = mergedBorderedRef.value;
      const { color } = props;
      let hash = "";
      if (size) {
        if (typeof size === "number") {
          hash += `a${size}`;
        } else {
          hash += size[0];
        }
      }
      if (round) {
        hash += "b";
      }
      if (bordered) {
        hash += "c";
      }
      if (color) {
        hash += colorToClass.color2Class(color);
      }
      return hash;
    }), cssVarsRef, props) : void 0;
    const shouldStartLoadingRef = reactivity_esmBundler.ref(!props.lazy);
    runtimeCore_esmBundler.onMounted(() => {
      if (isNativeLazyLoad.isImageSupportNativeLazy) {
        return;
      }
      let unobserve;
      const stopWatchHandle = runtimeCore_esmBundler.watchEffect(() => {
        unobserve === null || unobserve === void 0 ? void 0 : unobserve();
        unobserve = void 0;
        if (props.lazy) {
          unobserve = utils.observeIntersection(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
        }
      });
      runtimeCore_esmBundler.onBeforeUnmount(() => {
        stopWatchHandle();
        unobserve === null || unobserve === void 0 ? void 0 : unobserve();
      });
    });
    const loadedRef = reactivity_esmBundler.ref(!props.lazy);
    return {
      textRef,
      selfRef,
      mergedRoundRef,
      mergedClsPrefix: mergedClsPrefixRef,
      fitTextTransform,
      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
      hasLoadError: hasLoadErrorRef,
      handleError,
      shouldStartLoading: shouldStartLoadingRef,
      loaded: loadedRef,
      mergedOnLoad: (e) => {
        var _a;
        const { onLoad, imgProps } = props;
        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
        (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
        loadedRef.value = true;
      }
    };
  },
  render() {
    var _a, _b;
    const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded, hasLoadError } = this;
    onRender === null || onRender === void 0 ? void 0 : onRender();
    let img;
    const placeholderNode = !loaded && !hasLoadError && (this.renderPlaceholder ? this.renderPlaceholder() : (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a));
    if (this.hasLoadError) {
      img = this.renderFallback ? this.renderFallback() : resolveSlot.resolveSlot($slots.fallback, () => [
        runtimeCore_esmBundler.h("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } })
      ]);
    } else {
      img = resolveSlot.resolveWrappedSlot($slots.default, (children) => {
        if (children) {
          return runtimeCore_esmBundler.h(VResizeObserver.default, { onResize: this.fitTextTransform }, {
            default: () => runtimeCore_esmBundler.h("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, children)
          });
        } else if (src) {
          const { imgProps } = this;
          return runtimeCore_esmBundler.h("img", Object.assign(Object.assign({}, imgProps), { loading: (
            // If interseciton observer options is set, do not use native lazy
            isNativeLazyLoad.isImageSupportNativeLazy && !this.intersectionObserverOptions && lazy ? "lazy" : "eager"
          ), src: isNativeLazyLoad.isImageSupportNativeLazy ? src : shouldStartLoading || loaded ? src : void 0, onLoad: mergedOnLoad, "data-image-src": src, onError: this.handleError, style: [
            imgProps === null || imgProps === void 0 ? void 0 : imgProps.style,
            { objectFit: this.objectFit },
            placeholderNode ? {
              height: "0",
              width: "0",
              visibility: "hidden",
              position: "absolute"
            } : ""
          ] }));
        }
      });
    }
    return runtimeCore_esmBundler.h(
      "span",
      { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars },
      img,
      lazy && placeholderNode
    );
  }
});
exports.avatarProps = avatarProps;
exports.default = NAvatar;
