import { DtIconUsers as u } from "@dialpad/dialtone-icons/vue3";
import { extractVueListeners as s, safeConcatStrings as n } from "../../common/utils/index.js";
import { DialtoneLocalization as d } from "../../localization/index.js";
import { resolveComponent as o, createBlock as c, openBlock as l, mergeProps as p, toHandlers as _, withCtx as m, createVNode as C } from "vue";
import { _ as h } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import T from "../general-row/general-row.js";
const f = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeGroupRow",
  components: {
    DtIconUsers: u,
    DtRecipeGeneralRow: T
  },
  inheritAttrs: !1,
  props: {
    /**
     * Names of the group members
     */
    names: {
      type: String,
      required: !0
    },
    /**
     * Number of unread messages
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Number of unread mention messages
     */
    unreadMentionCount: {
      type: String,
      default: null
    },
    /**
     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
     * the unread count badge.
     */
    hasUnreads: {
      type: Boolean,
      default: !1
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Shows an "is typing" animation over the avatar when true.
     */
    isTyping: {
      type: Boolean,
      default: !1
    }
  },
  data() {
    return {
      i18n: new d()
    };
  },
  computed: {
    groupCount() {
      return this.names.split(",").length;
    },
    messageCount() {
      return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
    },
    mentionCount() {
      return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
    },
    unreadCountTooltip() {
      return n([
        this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }),
        this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })
      ]);
    },
    typingTooltip() {
      return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
    },
    ariaLabel() {
      return n([
        this.typingTooltip,
        this.i18n.$t("DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT", { count: this.groupCount }),
        this.names,
        this.unreadCountTooltip
      ]);
    },
    contactRowListeners() {
      return s(this.$attrs);
    }
  }
};
function g(r, N, t, E, y, e) {
  const i = o("dt-icon-users"), a = o("dt-recipe-general-row");
  return l(), c(a, p({
    description: t.names,
    "aria-label": e.ariaLabel,
    "unread-count": t.unreadCount,
    "has-unreads": t.hasUnreads,
    "unread-mention-count": t.unreadMentionCount,
    "unread-count-tooltip": e.unreadCountTooltip,
    selected: t.selected,
    "is-typing": t.isTyping
  }, r.$attrs, _(e.contactRowListeners)), {
    left: m(() => [
      C(i, { size: "300" })
    ]),
    _: 1
  }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-mention-count", "unread-count-tooltip", "selected", "is-typing"]);
}
const M = /* @__PURE__ */ h(f, [["render", g]]);
export {
  M as default
};
//# sourceMappingURL=group-row.js.map
