import { a3 as s, a4 as t, a5 as d, a6 as S, a7 as h, a8 as m, w as p, a9 as P, aa as $, ab as c, V, ac as z, U as k, H as a, ad as r, I as D, ae as l, af as i, ag as E, ah as B, ai as I, aj as L, P as T, ak as A, al as W, am as M, an as N, ao as j, ap as U, aq as F, ar as O, as as R } from "./56c67d3b.js";
import { useContext as v } from "react";
import { badgeChildren as q, BadgeBasicSection as H } from "./6b3b0995.js";
import "react-dom";
const G = s(F)`
  background: ${(e) => e.$style.background};
  color: ${(e) => e.$style.fill};
  cursor: ${(e) => e.$cursorPointer ? "pointer" : ""};
`, J = s.div`
display: flex;
width: 100%;
height: 100%;
align-items: center;
flex-direction: ${(e) => e.labelPosition === "left" ? "row" : "row-reverse"};
${(e) => e.$style && {
  ...e.$style,
  borderRadius: e.$style.radius
}}
`, K = s.div`
width: calc(100% - ${(e) => e.iconSize}px);
display: flex;
padding-left: 5px;
padding-right: 5px;
flex-direction: column;
justify-content: flex-end;
align-items: ${(e) => e.alignmentPosition === "left" ? "flex-start" : "flex-end"};
`, Q = s.span`
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: ${(e) => e.$style.textWeight};
border-radius: ${(e) => e.$style.radius};
font-size: ${(e) => e.$style.textSize};
text-transform: ${(e) => e.$style.textTransform};
color: ${(e) => e.$style.text};
border: ${(e) => e.$style.border};
border-style: ${(e) => e.$style.borderStyle};
border-width: ${(e) => e.$style.borderWidth};
font-family: ${(e) => e.$style.fontFamily};
font-style: ${(e) => e.$style.fontStyle};
margin: ${(e) => e.$style.margin};
padding: ${(e) => e.$style.padding};
background: ${(e) => e.$style.background};
text-decoration: ${(e) => e.$style.textDecoration};
`, X = s.span`
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: ${(e) => e.$style.textWeight};
border-radius: ${(e) => e.$style.radius};
font-size: ${(e) => e.$style.textSize};
text-transform: ${(e) => e.$style.textTransform};
color: ${(e) => e.$style.text};
border: ${(e) => e.$style.border};
border-style: ${(e) => e.$style.borderStyle};
border-width: ${(e) => e.$style.borderWidth};
font-family: ${(e) => e.$style.fontFamily};
font-style: ${(e) => e.$style.fontStyle};
margin: ${(e) => e.$style.margin};
padding: ${(e) => e.$style.padding};
background: ${(e) => e.$style.background};
text-decoration: ${(e) => e.$style.textDecoration};
`, Y = [O], Z = [{
  label: t("avatarComp.square"),
  value: "square"
}, {
  label: t("avatarComp.circle"),
  value: "circle"
}], _ = [{
  label: t("labelProp.left"),
  value: "left"
}, {
  label: t("labelProp.right"),
  value: "right"
}], ee = {
  style: d(S, "style"),
  avatarStyle: d(h, "avatarStyle"),
  labelStyle: d(m, "labelStyle"),
  captionStyle: d(m, "captionStyle"),
  icon: p(T, "/icon:solid/user"),
  iconSize: p(A, 40),
  onEvent: P(Y),
  shape: $(Z, "circle"),
  title: c("title", ""),
  src: c("src", ""),
  avatarLabel: c("avatarLabel", "{{currentUser.name}}"),
  avatarCatption: c("avatarCatption", "{{currentUser.email}}"),
  labelPosition: $(_, "left"),
  alignmentPosition: p(W, "left"),
  enableDropdownMenu: V,
  options: z,
  ...q
}, te = (e) => {
  const {
    shape: u,
    title: b,
    src: f,
    iconSize: g
  } = e;
  v(M).getUICompByName(v(N));
  const w = e.options.findIndex((o) => {
    var n;
    return (n = o.prefixIcon) == null ? void 0 : n.props.value;
  }) > -1, y = e.options.filter((o) => !o.hidden).map((o, n) => ({
    title: o.label,
    label: o.label,
    key: o.label + " - " + n,
    disabled: o.disabled,
    icon: w && /* @__PURE__ */ a("span", {
      children: o.prefixIcon
    }),
    onEvent: o.onEvent
  })), C = /* @__PURE__ */ a(R, {
    items: y,
    onClick: ({
      key: o
    }) => {
      var n;
      return (n = y.find((x) => x.key === o)) == null ? void 0 : n.onEvent("click");
    }
  });
  return /* @__PURE__ */ a(j, {
    menu: {
      items: y
    },
    placement: e.labelPosition === "left" ? "bottomLeft" : "bottomRight",
    arrow: !0,
    disabled: !e.enableDropdownMenu,
    dropdownRender: () => C,
    children: /* @__PURE__ */ r(J, {
      iconSize: e.iconSize,
      labelPosition: e.labelPosition,
      $style: e.style,
      children: [/* @__PURE__ */ a(U, {
        count: e.badgeCount.value,
        dot: e.badgeType === "dot",
        size: e.badgeSize,
        overflowCount: e.overflowCount,
        title: e.badgeTitle,
        offset: e.shape === "circle" ? [-2, 6] : [0, 0],
        children: /* @__PURE__ */ a(G, {
          size: g,
          icon: b.value !== "" ? null : e.icon,
          shape: u,
          $style: e.avatarStyle,
          src: f.value,
          onClick: () => e.onEvent("click"),
          children: b.value
        })
      }), /* @__PURE__ */ r(K, {
        iconSize: e.iconSize,
        alignmentPosition: e.alignmentPosition,
        children: [/* @__PURE__ */ a(Q, {
          $style: e.labelStyle,
          children: e.avatarLabel.value
        }), /* @__PURE__ */ a(X, {
          $style: e.captionStyle,
          children: e.avatarCatption.value
        })]
      })]
    })
  });
};
let ae = function() {
  return new k(ee, (e) => /* @__PURE__ */ a(te, {
    ...e
  })).setPropertyViewFn((e) => /* @__PURE__ */ r(D, {
    children: [/* @__PURE__ */ r(l, {
      name: i.basic,
      children: [e.src.propertyView({
        label: t("avatarComp.src"),
        placeholder: "http://xxxx/xx.jpg",
        tooltip: t("avatarComp.avatarCompTooltip")
      }), e.title.propertyView({
        label: t("avatarComp.title"),
        tooltip: t("avatarComp.avatarCompTooltip")
      }), e.icon.propertyView({
        label: t("avatarComp.icon"),
        IconType: "All",
        tooltip: t("avatarComp.avatarCompTooltip")
      }), e.shape.propertyView({
        label: t("avatarComp.shape"),
        radioButton: !0
      }), e.iconSize.propertyView({
        label: t("avatarComp.iconSize")
      }), e.enableDropdownMenu.propertyView({
        label: t("avatarComp.enableDropDown")
      }), e.enableDropdownMenu.getView() && e.options.propertyView({})]
    }), /* @__PURE__ */ r(l, {
      name: t("avatarComp.label"),
      children: [e.avatarLabel.propertyView({
        label: t("avatarComp.label")
      }), e.avatarCatption.propertyView({
        label: t("avatarComp.caption")
      }), e.labelPosition.propertyView({
        label: t("avatarComp.labelPosition"),
        radioButton: !0
      }), e.alignmentPosition.propertyView({
        label: t("avatarComp.alignmentPosition"),
        radioButton: !0
      })]
    }), /* @__PURE__ */ a(H, {
      ...e
    }), /* @__PURE__ */ a(l, {
      name: i.interaction,
      children: e.onEvent.getPropertyView()
    }), /* @__PURE__ */ a(l, {
      name: i.layout,
      children: E(e)
    }), /* @__PURE__ */ a(l, {
      name: i.style,
      children: e.style.getPropertyView()
    }), /* @__PURE__ */ a(l, {
      name: i.avatarStyle,
      children: e.avatarStyle.getPropertyView()
    }), /* @__PURE__ */ a(l, {
      name: i.labelStyle,
      children: e.labelStyle.getPropertyView()
    }), /* @__PURE__ */ a(l, {
      name: i.captionStyle,
      children: e.captionStyle.getPropertyView()
    })]
  })).build();
}();
const re = B(ae, [I, new L("badgeCount", t("button.textDesc"))]);
export {
  re as AvatarComp
};
