import { addClassStyleAttrs as S, removeClassStyleAttrs as A, returnFirstEl as u, extractVueListeners as E, safeConcatStrings as N } from "../../common/utils/index.js";
import { DtIconChevronDown as W, DtIconHeadphones as k } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as D } from "../../localization/index.js";
import { resolveComponent as i, createElementBlock as f, openBlock as h, mergeProps as w, createElementVNode as o, normalizeClass as T, createCommentVNode as C, toHandlers as q, createVNode as _, normalizeStyle as B, withCtx as b, createTextVNode as y, toDisplayString as v, renderSlot as L, createBlock as $, withModifiers as z } from "vue";
import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import R from "../emoji-text-wrapper/emoji-text-wrapper.js";
import j from "../badge/badge.js";
import U from "../button/button.js";
const V = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeContactCentersRow",
  components: {
    DtButton: U,
    DtBadge: j,
    DtEmojiTextWrapper: R,
    DtIconHeadphones: k,
    DtIconChevronDown: W
  },
  inheritAttrs: !1,
  props: {
    /**
     * 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.
     */
    description: {
      type: String,
      required: !0
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Making this true will hide the unread count badge, the chevron button, and the right slot
     */
    hideActions: {
      type: Boolean,
      default: !1
    },
    /**
     * Number of unread messages, could be a string to support '99+'
     */
    unreadCount: {
      type: String,
      default: null,
      validator(e) {
        return e ? /^\d+\+?$/.test(e) : !0;
      }
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Menu button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "click-menu"
  ],
  data() {
    return {
      labelWidth: "auto",
      i18n: new D()
    };
  },
  computed: {
    leftbarContactCentersRowClasses() {
      return [
        "d-recipe-leftbar-row",
        "d-recipe-leftbar-row--contact-centers",
        {
          "d-recipe-leftbar-row__unread-count": this.showUnreadCount,
          "d-recipe-leftbar-row--selected": this.selected
        }
      ];
    },
    getAriaLabel() {
      const e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
      return this.ariaLabel ? this.ariaLabel : N([
        this.description,
        this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })
      ]);
    },
    contactRowListeners() {
      return E(this.$attrs);
    },
    showUnreadCount() {
      return !!this.unreadCount;
    },
    menuButtonLabel() {
      return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL");
    }
  },
  watch: {
    $props: {
      deep: !0,
      async handler() {
        await this.$nextTick(), this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(u(this.$el)), this.adjustLabelWidth();
  },
  beforeUnmount: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    removeClassStyleAttrs: A,
    addClassStyleAttrs: S,
    adjustLabelWidth() {
      var n, t, s, l, d, c;
      const e = ((t = (n = u(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, r = ((l = (s = u(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, a = ((c = (d = u(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, m = 12;
      this.labelWidth = e - (r + a + m) + "px";
    }
  }
}, x = ["data-qa", "aria-label", "title", "href"], I = { class: "d-recipe-leftbar-row__alpha" }, M = {
  key: 0,
  class: "d-recipe-leftbar-row__omega"
}, H = { class: "d-recipe-leftbar-row__action-container" }, F = { class: "d-recipe-leftbar-row__bottom" };
function G(e, r, a, m, n, t) {
  const s = i("dt-icon-headphones"), l = i("dt-emoji-text-wrapper"), d = i("dt-badge"), c = i("dt-icon-chevron-down"), g = i("dt-button");
  return h(), f("div", w({
    class: [
      "d-recipe-leftbar-row__container",
      { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }
    ]
  }, t.addClassStyleAttrs(e.$attrs)), [
    o("div", {
      class: T(t.leftbarContactCentersRowClasses),
      "data-qa": "dt-recipe-contact-centers-row"
    }, [
      o("a", w({
        class: "d-recipe-leftbar-row__primary",
        "data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
        "aria-label": t.getAriaLabel,
        title: a.description,
        href: e.$attrs.href ?? "javascript:void(0)"
      }, t.removeClassStyleAttrs(e.$attrs), q(t.contactRowListeners, !0), {
        onClick: r[0] || (r[0] = (p) => e.$emit("click", p))
      }), [
        o("div", I, [
          _(s, {
            size: "300",
            "data-qa": "dt-recipe-leftbar-row-icon"
          })
        ]),
        o("div", {
          class: "d-recipe-leftbar-row__label",
          style: B(`flex-basis: ${n.labelWidth}`)
        }, [
          _(l, {
            class: "d-recipe-leftbar-row__description",
            "data-qa": "dt-recipe-leftbar-row-description",
            size: "200"
          }, {
            default: b(() => [
              y(v(a.description), 1)
            ]),
            _: 1
          })
        ], 4)
      ], 16, x),
      a.hideActions ? C("", !0) : (h(), f("div", M, [
        L(e.$slots, "right"),
        o("div", H, [
          t.showUnreadCount ? (h(), $(d, {
            key: 0,
            class: "d-recipe-leftbar-row__unread-badge",
            "data-qa": "dt-recipe-leftbar-row-unread-badge",
            kind: "count",
            type: "bulletin"
          }, {
            default: b(() => [
              y(v(a.unreadCount), 1)
            ]),
            _: 1
          })) : C("", !0),
          _(g, {
            class: "d-recipe-leftbar-row__action",
            "data-qa": "dt-recipe-leftbar-row-action-button",
            "aria-label": t.menuButtonLabel,
            title: t.menuButtonLabel,
            importance: "clear",
            size: "xs",
            circle: "",
            onClick: r[1] || (r[1] = z((p) => e.$emit("click-menu", p), ["stop"]))
          }, {
            icon: b(() => [
              _(c, { size: "100" })
            ]),
            _: 1
          }, 8, ["aria-label", "title"])
        ])
      ]))
    ], 2),
    o("div", F, [
      L(e.$slots, "timer")
    ])
  ], 16);
}
const te = /* @__PURE__ */ O(V, [["render", G]]);
export {
  te as default
};
//# sourceMappingURL=contact-centers-row.js.map
