import { ref, watch, toRef, withDirectives, createVNode, resolveDirective, nextTick } from "vue";
import "./styles/avatar.scss";
import { Resize } from "../../directives/resize/index.mjs";
import { makePaperProps, usePaper } from "../../composables/paper/index.mjs";
import { Image } from "../image/image.mjs";
import { Icon } from "../icon/icon.mjs";
import { propsFactory } from "../../utils/dist/index.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const RADIX = 0.8;
const makeAvatarProps = propsFactory({
  start: Boolean,
  end: Boolean,
  image: String,
  icon: [String, Object],
  text: String,
  link: Boolean,
  ...makePaperProps({
    color: "secondary",
    shape: "circle"
  })
}, "avatar");
const Avatar = defineComponent({
  name: "VeAvatar",
  directives: {
    Resize
  },
  props: makeAvatarProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      paperClasses,
      paperStyles
    } = usePaper(props);
    const rootRef = ref();
    const contentRef = ref();
    function onResize() {
      nextTick(() => {
        if (!rootRef.value || !contentRef.value)
          return;
        const ratio = Math.min(rootRef.value.offsetWidth / contentRef.value.offsetWidth * RADIX, rootRef.value.offsetHeight / contentRef.value.offsetHeight * RADIX, 1);
        contentRef.value.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`;
      });
    }
    watch(toRef(props, "text"), onResize);
    return () => {
      const hasImage = !!props.image;
      const hasIcon = !!props.icon;
      const hasText = !!props.text;
      const isClickable = props.link || !!(attrs.onClick || attrs.onClickOnce);
      return withDirectives(createVNode(props.tag, {
        "class": ["ve-avatar", {
          "ve-avatar--start": props.start,
          "ve-avatar--end": props.end,
          "ve-avatar--icon": props.icon,
          "ve-avatar--link": isClickable
        }, paperClasses.value],
        "style": paperStyles.value,
        "ref": rootRef
      }, {
        default: () => {
          var _a;
          return [hasImage && createVNode(Image, {
            "src": props.image,
            "alt": ""
          }, null), hasIcon && !hasImage && createVNode(Icon, {
            "icon": props.icon,
            "size": props.size
          }, null), hasText && !hasIcon && !hasImage && createVNode("span", {
            "class": "ve-avatar__wrapper",
            "ref": contentRef
          }, [props.text]), (_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      }), [[resolveDirective("resize"), onResize]]);
    };
  }
});
export {
  Avatar,
  makeAvatarProps
};
//# sourceMappingURL=avatar.mjs.map
