import { LEFTBAR_GENERAL_ROW_TYPES as n, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as c, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR as h, LEFTBAR_GENERAL_ROW_ICON_SIZES as _ } from "./general-row-constants.js";
import { DtIconWaveform as f, DtIconPhone as C } from "@dialpad/dialtone-icons/vue2";
import b from "./leftbar-general-row-icon.js";
import { safeConcatStrings as p } from "../../common/utils/index.js";
import { DialtoneLocalization as T } from "../../localization/index.js";
import { n as m } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import y from "../tooltip/tooltip.js";
import w from "../button/button.js";
import v from "../badge/badge.js";
import g from "../emoji-text-wrapper/emoji-text-wrapper.js";
const E = {
  name: "DtRecipeGeneralRow",
  components: {
    DtEmojiTextWrapper: g,
    DtBadge: v,
    DtButton: w,
    DtTooltip: y,
    DtIconPhone: C,
    DtIconWaveform: f,
    DtRecipeLeftbarGeneralRowIcon: b
  },
  inheritAttrs: !1,
  props: {
    /**
     * Determines the icon to show.
     * If type is contact center, the color prop must be provided and will determine the color of the icon
     */
    type: {
      type: String,
      default: "inbox",
      validator: (a) => Object.values(n).includes(a)
    },
    /**
     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
     * you still must input this as it will be displayed as the "title" attribute for the row.
     */
    description: {
      type: String,
      required: !0
    },
    /**
     * Determines the color of the contact center icon
     */
    color: {
      type: String,
      default: null,
      validator: (a) => Object.keys(c).includes(a)
    },
    /**
     * The channel setting, either 'mention' or 'always'.
     * @values 'mention', 'always', null.
     */
    channelSetting: {
      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
    },
    /**
     * Number of unread messages
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Number of unread mention messages
     */
    unreadMentionCount: {
      type: String,
      default: null
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Gives a faded style to be used when muted
     */
    muted: {
      type: Boolean,
      default: !1
    },
    /**
     * Shows styling to represent an active voice chat. This will display over unreadCount.
     */
    activeVoiceChat: {
      type: Boolean,
      default: !1
    },
    /**
     * Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
     * unreadCount.
     */
    dndText: {
      type: String,
      default: ""
    },
    /**
     * Whether the row should have a call button. Usually only applicable to individual contact rows.
     */
    hasCallButton: {
      type: Boolean,
      default: !1
    },
    /**
     * Shows an "is typing" animation over the avatar when true.
     */
    isTyping: {
      type: Boolean,
      default: !1
    },
    /**
     * Sets the size of the icon.
     */
    iconSize: {
      type: String,
      default: "300",
      validator: (a) => _.includes(a)
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Call button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "call"
  ],
  data() {
    return {
      actionFocused: !1,
      labelWidth: "100%",
      i18n: new T()
    };
  },
  computed: {
    leftbarGeneralRowClasses() {
      return [
        "d-recipe-leftbar-row",
        {
          "d-recipe-leftbar-row--no-action": !this.hasCallButton,
          "d-recipe-leftbar-row--has-unread": this.hasUnreads,
          "d-recipe-leftbar-row__unread-count": this.showUnreadCount || this.showUnreadMentionCount,
          "d-recipe-leftbar-row--selected": this.selected,
          "d-recipe-leftbar-row--muted": this.muted,
          "d-recipe-leftbar-row--action-focused": this.actionFocused
        }
      ];
    },
    getIcon() {
      switch (this.type) {
        case n.CHANNELS:
          if (this.hasUnreads) return "channel unread";
          break;
        case n.LOCKED_CHANNEL:
          if (this.hasUnreads) return "locked channel unread";
          break;
      }
      return this.type;
    },
    getAriaLabel() {
      return this.ariaLabel ? this.ariaLabel : p([
        this.typingTooltip,
        this.description,
        this.unreadCountTooltip,
        this.dndTextTooltip,
        this.activeVoiceChatTooltip
      ]);
    },
    hasActions() {
      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton || this.showUnreadMentionCount;
    },
    showUnreadCount() {
      return !!this.unreadCount && this.hasUnreads;
    },
    showUnreadMentionCount() {
      return !!this.unreadMentionCount && this.hasUnreads;
    },
    hasUnreadCount() {
      return this.unreadCount !== null;
    },
    hasUnreadMentionCount() {
      return this.unreadMentionCount !== null;
    },
    shouldApplyCustomStyleForCountBadge() {
      return this.hasUnreadCount && this.hasUnreadMentionCount;
    },
    /**
     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,
     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).
     * @returns {boolean}
     */
    shouldApplyCustomStyleForMentionOnly() {
      return this.channelSetting === "always" && !this.hasUnreadCount && this.hasUnreadMentionCount;
    },
    messageCount() {
      return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
    },
    mentionCount() {
      return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
    },
    unreadCountTooltip() {
      return p([
        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 })
      ]);
    },
    dndTextTooltip() {
      return this.dndText && this.i18n.$t("DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP");
    },
    activeVoiceChatTooltip() {
      return this.activeVoiceChat && this.i18n.$t("DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT");
    },
    callButtonTooltip() {
      return this.i18n.$t("DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP");
    },
    typingTooltip() {
      return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
    }
  },
  watch: {
    $props: {
      immediate: !0,
      deep: !0,
      async handler() {
        this.validateProps(), await this.$nextTick(), this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(this.$el), this.adjustLabelWidth();
  },
  beforeDestroy: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    validateProps() {
      this.type === n.CONTACT_CENTER && !Object.keys(c).includes(this.color) && console.error(h);
    },
    adjustLabelWidth() {
      var o, i, s, l, d, u;
      const a = ((i = (o = this.$el) == null ? void 0 : o.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : i.clientWidth) || 0, t = ((l = (s = this.$el) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, e = ((u = (d = this.$el) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : u.clientWidth) || 0, r = 16;
      this.labelWidth = a - (t + e + r) + "px";
    }
  }
};
var N = function() {
  var t = this, e = t._self._c;
  return e("div", { class: t.leftbarGeneralRowClasses, attrs: { "data-qa": "dt-recipe-leftbar-row" } }, [e("a", t._g(t._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": "data-qa" in t.$attrs ? t.$attrs["data-qa"] : "d-recipe-leftbar-row-link", "aria-label": t.getAriaLabel, title: t.description, href: "href" in t.$attrs ? t.$attrs.href : "javascript:void(0)" } }, "a", t.$attrs, !1), t.$listeners), [e("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [t.isTyping ? e("div", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.typingTooltip, expression: "typingTooltip" }], staticClass: "d-recipe-leftbar-row__is-typing" }, [e("span"), e("span"), e("span")]) : t._t("left", function() {
    return [e("dt-recipe-leftbar-general-row-icon", { attrs: { type: t.getIcon, color: t.color, "icon-size": t.iconSize, "data-qa": "dt-recipe-leftbar-row-icon" } })];
  })], 2), e("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${t.labelWidth}` }, [t._t("label", function() {
    return [e("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [t._v(" " + t._s(t.description) + " ")])];
  })], 2)]), t.hasActions ? e("div", { staticClass: "d-recipe-leftbar-row__omega" }, [t.dndText ? e("dt-tooltip", { attrs: { placement: "top", message: t.dndTextTooltip }, scopedSlots: t._u([{ key: "anchor", fn: function() {
    return [e("div", { ref: "d-recipe-leftbar-row-dnd", staticClass: "d-recipe-leftbar-row__dnd", attrs: { "data-qa": "dt-recipe-leftbar-row-dnd" } }, [t._v(" " + t._s(t.dndText) + " ")])];
  }, proxy: !0 }], null, !1, 3247296267) }) : t._e(), t.activeVoiceChat ? e("div", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.activeVoiceChatTooltip, expression: "activeVoiceChatTooltip" }], staticClass: "d-recipe-leftbar-row__active-voice" }, [e("dt-icon-waveform", { attrs: { size: "300" } })], 1) : t.showUnreadCount || t.showUnreadMentionCount ? e("dt-tooltip", { attrs: { message: t.unreadCountTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
    return [t.showUnreadCount ? e("dt-badge", { class: ["d-recipe-leftbar-row__unread-badge", {
      "d-recipe-leftbar-row__unread-count-badge": t.shouldApplyCustomStyleForCountBadge
    }], attrs: { kind: "count", type: "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-badge" } }, [t._v(" " + t._s(t.unreadCount) + " ")]) : t._e(), t.showUnreadMentionCount ? e("dt-badge", { class: [
      "d-recipe-leftbar-row__unread-badge",
      { "d-recipe-leftbar-row__unread-mention-count-badge": t.shouldApplyCustomStyleForCountBadge },
      { "d-recipe-leftbar-row__unread-mention-only-count-badge": t.shouldApplyCustomStyleForMentionOnly }
    ], attrs: { kind: "count", type: "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-mention-badge" } }, [t._v(" " + t._s(t.unreadMentionCount) + " ")]) : t._e()];
  }, proxy: !0 }], null, !1, 715135836) }) : t._e(), t.hasCallButton ? e("div", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action" } }, [e("dt-tooltip", { attrs: { message: t.callButtonTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
    return [e("dt-button", { staticClass: "d-recipe-leftbar-row__action-button", attrs: { "data-qa": "dt-recipe-leftbar-row-action-call-button", circle: "", size: "xs", kind: "inverted", "aria-label": t.callButtonTooltip }, on: { focus: function(r) {
      t.actionFocused = !0;
    }, blur: function(r) {
      t.actionFocused = !1;
    }, click: function(r) {
      return r.stopPropagation(), t.$emit("call", r);
    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
      return [e("dt-icon-phone", { attrs: { size: "200" } })];
    }, proxy: !0 }], null, !1, 2193255039) })];
  }, proxy: !0 }], null, !1, 3837984112) })], 1) : t._e()], 1) : t._e()]);
}, A = [], O = /* @__PURE__ */ m(
  E,
  N,
  A
);
const M = O.exports;
export {
  M as default
};
//# sourceMappingURL=general-row.js.map
