import { DEFAULT_FEED_ROW_STATE as i, FEED_ROW_STATE_BACKGROUND_COLOR as s } from "./feed-item-row-constants.js";
import o from "../../common/mixins/modal.js";
import { DtIconUser as n } from "@dialpad/dialtone-icons/vue2";
import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../avatar/avatar.js";
import m from "../lazy-show/lazy-show.js";
import l from "../list-item/list-item.js";
import f from "../badge/badge.js";
const p = {
  name: "DtRecipeFeedItemRow",
  components: {
    DtAvatar: c,
    DtLazyShow: m,
    DtListItem: l,
    DtBadge: f,
    DtIconUser: n
  },
  mixins: [o],
  inheritAttrs: !1,
  props: {
    /**
     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
     */
    avatarSeed: {
      type: String,
      default: null
    },
    /**
     * Show avatar, show header text or dont show left time and vice versa
     */
    showHeader: {
      type: Boolean,
      default: !1
    },
    /**
     * Optional avatar image url.
     * If not provided it will use extracted initials from displayName.
     */
    avatarImageUrl: {
      type: String,
      default: ""
    },
    /**
     * The display name of the sender
     */
    displayName: {
      type: String,
      default: ""
    },
    /**
     * Initials will never be shown. Instead it will show a "User" icon.
     */
    noInitials: {
      type: Boolean,
      default: !1
    },
    /**
     * time string displayed as is.
     * Shown on the header when showHeader is true
     */
    time: {
      type: String,
      default: ""
    },
    /**
     * short time string without AM/PM displayed as is.
     * Shown on the left of feed item when showHeader is false and isActive is true
     */
    shortTime: {
      type: String,
      default: ""
    },
    /**
     * A label displayed next to the displayName. Will not show if empty.
     */
    labelText: {
      type: String,
      default: ""
    },
    /**
     * displays a darkened background on the row.
     */
    isActive: {
      type: Boolean,
      default: !1
    },
    /**
     * state for the feed item row. Can be normal, searched & error
     */
    state: {
      type: String,
      default: i,
      validator: (a) => Object.keys(s).includes(a)
    }
  },
  emits: [
    /**
     * Fires when hovered over feed row
     *
     * @event hover
     * @type {Boolean}
     */
    "hover",
    /**
     * Fires when focused over feed row
     *
     * @event focus
     * @type {Boolean}
     */
    "focus",
    /**
     * Key down event
     *
     * @event keydown
     * @type {KeyboardEvent}
     */
    "keydown"
  ],
  data() {
    return {
      transitionActive: !1
    };
  },
  computed: {
    feedListeners() {
      return {
        ...this.$listeners,
        mouseenter: () => this.setHover(!0),
        mouseleave: () => this.setHover(!1),
        focusin: () => this.setFocus(!0),
        focusout: () => this.setFocus(!1),
        transitionend: () => this.transitionComplete(),
        keydown: (a) => {
          switch (a.code) {
            case "Tab":
              this.trapFocus(a);
              break;
          }
          this.$emit("keydown", a);
        }
      };
    },
    listItemClasses() {
      return [
        "d-recipe-feed-item-row",
        { "d-recipe-feed-item-row--active": this.isActive && this.state === i },
        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
        s[this.state]
      ];
    }
  },
  watch: {
    state: {
      immediate: !0,
      handler: function(a, e) {
        a !== i && (this.transitionActive = !0);
      }
    }
  },
  methods: {
    transitionComplete() {
      this.state === i && (this.transitionActive = !1);
    },
    trapFocus(a) {
      this.focusTrappedTabPress(a);
    },
    setFocus(a) {
      this.$emit("focus", a);
    },
    setHover(a) {
      this.$emit("hover", a);
    }
  }
};
var _ = function() {
  var e = this, t = e._self._c;
  return t("dt-list-item", e._g(e._b({ ref: "FeedItemRef", class: e.listItemClasses, attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: e._u([{ key: "left", fn: function() {
    return [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [e._t("avatar", function() {
      return [t("dt-avatar", { attrs: { "full-name": e.displayName, "image-src": e.avatarImageUrl, "image-alt": "", seed: e.avatarSeed }, scopedSlots: e._u([e.noInitials ? { key: "icon", fn: function({ iconSize: r }) {
        return [t("dt-icon-user", { attrs: { size: r } })];
      } } : null], null, !0) })];
    })], 2) : e._e(), e.showHeader ? e._e() : t("span", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [e._v(" " + e._s(e.shortTime) + " ")])];
  }, proxy: !0 }, { key: "bottom", fn: function() {
    return [e.$slots.reactions ? t("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [e._t("reactions")], 2) : e._e(), e.$slots.threading ? t("div", { staticClass: "d-recipe-feed-item-row__threading" }, [e._t("threading")], 2) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [t("dt-lazy-show", { attrs: { appear: !0, transition: "fade", show: e.isActive } }, [e._t("menu")], 2)], 1)];
  }, proxy: !0 }], null, !0) }, "dt-list-item", e.$attrs, !1), e.feedListeners), [t("article", { staticClass: "d-recipe-feed-item-row__content" }, [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [e._t("displayName", function() {
    return [t("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [e._v(" " + e._s(e.displayName) + " ")])];
  }), t("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [e._v(" " + e._s(e.time) + " ")]), e.labelText ? t("dt-badge", { attrs: { text: e.labelText } }) : e._e()], 2) : e._e(), t("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [e._t("default")], 2), e.$slots.attachment ? t("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [e._t("attachment")], 2) : e._e()])]);
}, u = [], h = /* @__PURE__ */ d(
  p,
  _,
  u
);
const x = h.exports;
export {
  x as default
};
//# sourceMappingURL=feed-item-row.js.map
