import { DEFAULT_FEED_ROW_STATE as c, FEED_ROW_STATE_BACKGROUND_COLOR as _ } from "./feed-item-row-constants.js";
import D from "../../common/mixins/modal.js";
import { DtIconUser as T } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as r, openBlock as a, createBlock as h, mergeProps as b, toHandlers as C, withCtx as d, createElementBlock as o, renderSlot as i, createVNode as m, createSlots as E, createCommentVNode as s, withDirectives as u, toDisplayString as l, vShow as p, createElementVNode as n } from "vue";
import { _ as F } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../avatar/avatar.js";
import B from "../lazy-show/lazy-show.js";
import H from "../list-item/list-item.js";
import N from "../badge/badge.js";
const q = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeFeedItemRow",
  components: {
    DtAvatar: I,
    DtLazyShow: B,
    DtListItem: H,
    DtBadge: N,
    DtIconUser: T
  },
  mixins: [D],
  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: c,
      validator: (e) => Object.keys(_).includes(e)
    }
  },
  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 {
        mouseenter: () => this.setHover(!0),
        mouseleave: () => this.setHover(!1),
        focusin: () => this.setFocus(!0),
        focusout: () => this.setFocus(!1),
        transitionend: () => this.transitionComplete(),
        keydown: (e) => {
          switch (e.code) {
            case "Tab":
              this.trapFocus(e);
              break;
          }
          this.$emit("keydown", e);
        }
      };
    },
    listItemClasses() {
      return [
        "d-recipe-feed-item-row",
        { "d-recipe-feed-item-row--active": this.isActive && this.state === c },
        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
        _[this.state]
      ];
    }
  },
  watch: {
    state: {
      immediate: !0,
      handler: function(e, w) {
        e !== c && (this.transitionActive = !0);
      }
    }
  },
  methods: {
    transitionComplete() {
      this.state === c && (this.transitionActive = !1);
    },
    trapFocus(e) {
      this.focusTrappedTabPress(e);
    },
    setFocus(e) {
      this.$emit("focus", e);
    },
    setHover(e) {
      this.$emit("hover", e);
    }
  }
}, O = {
  key: 0,
  class: "d-recipe-feed-item-row__avatar-container"
}, R = { class: "d-recipe-feed-item-row__content" }, L = {
  key: 0,
  "data-qa": "dt-recipe-feed-item-row--header",
  class: "d-recipe-feed-item-row__header"
}, z = { class: "d-recipe-feed-item-row__header-name" }, U = { class: "d-recipe-feed-item-row__header-time" }, V = { "data-qa": "dt-recipe-feed-item-row--content" }, M = {
  key: 1,
  "data-qa": "dt-recipe-feed-item-row--attachment",
  class: "d-recipe-feed-item-row__attachment"
}, P = {
  key: 0,
  class: "d-recipe-feed-item-row__reactions",
  "data-qa": "dt-recipe-feed-item-row--reactions"
}, W = {
  key: 1,
  class: "d-recipe-feed-item-row__threading"
}, j = {
  "data-qa": "dt-recipe-feed-item-row--menu",
  class: "d-recipe-feed-item-row__menu"
};
function G(e, w, t, K, $, f) {
  const v = r("dt-icon-user"), y = r("dt-avatar"), g = r("dt-badge"), S = r("dt-lazy-show"), k = r("dt-list-item");
  return a(), h(k, b({
    ref: "FeedItemRef",
    "navigation-type": "none"
  }, e.$attrs, {
    class: f.listItemClasses,
    "data-qa": "dt-recipe-feed-item-row"
  }, C(f.feedListeners)), {
    left: d(() => [
      t.showHeader ? (a(), o("div", O, [
        i(e.$slots, "avatar", {}, () => [
          m(y, {
            "full-name": t.displayName,
            "image-src": t.avatarImageUrl,
            "image-alt": "",
            seed: t.avatarSeed
          }, E({ _: 2 }, [
            t.noInitials ? {
              name: "icon",
              fn: d(({ iconSize: A }) => [
                m(v, { size: A }, null, 8, ["size"])
              ]),
              key: "0"
            } : void 0
          ]), 1032, ["full-name", "image-src", "seed"])
        ])
      ])) : s("", !0),
      t.showHeader ? s("", !0) : u((a(), o("span", {
        key: 1,
        class: "d-recipe-feed-item-row__left-time",
        "data-qa": "dt-recipe-feed-item-row--left-time"
      }, l(t.shortTime), 513)), [
        [p, t.isActive]
      ])
    ]),
    bottom: d(() => [
      e.$slots.reactions ? (a(), o("div", P, [
        i(e.$slots, "reactions")
      ])) : s("", !0),
      e.$slots.threading ? (a(), o("div", W, [
        i(e.$slots, "threading")
      ])) : s("", !0),
      u(n("div", j, [
        m(S, {
          appear: !0,
          transition: "fade",
          show: t.isActive
        }, {
          default: d(() => [
            i(e.$slots, "menu")
          ]),
          _: 3
        }, 8, ["show"])
      ], 512), [
        [p, t.isActive]
      ])
    ]),
    default: d(() => [
      n("article", R, [
        t.showHeader ? (a(), o("div", L, [
          i(e.$slots, "displayName", {}, () => [
            n("p", z, l(t.displayName), 1)
          ]),
          n("time", U, l(t.time), 1),
          t.labelText ? (a(), h(g, {
            key: 0,
            text: t.labelText
          }, null, 8, ["text"])) : s("", !0)
        ])) : s("", !0),
        n("span", V, [
          i(e.$slots, "default")
        ]),
        e.$slots.attachment ? (a(), o("div", M, [
          i(e.$slots, "attachment")
        ])) : s("", !0)
      ])
    ]),
    _: 3
  }, 16, ["class"]);
}
const ie = /* @__PURE__ */ F(q, [["render", G]]);
export {
  ie as default
};
//# sourceMappingURL=feed-item-row.js.map
