import { ref as S, onMounted as re, openBlock as E, createElementBlock as j, createVNode as B, unref as k, withKeys as J, withModifiers as ue, createSlots as ye, withCtx as N, computed as M, watch as K, Fragment as W, renderList as G, createBlock as Z, resolveDynamicComponent as Le, nextTick as x, onBeforeUnmount as Te, createElementVNode as A, toDisplayString as z, withDirectives as te, createCommentVNode as Y, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
import { DtIconSearch as Ie, DtIconClose as je, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as Ce, DtIconLightbulb as De, DtIconHeart as Fe, DtIconFlag as Be, DtIconTiktok as Ke } from "@dialpad/dialtone-icons/vue3";
import Ne from "../input/input.js";
import de from "../button/button.js";
import { returnFirstEl as Me } from "../../common/utils/index.js";
import Pe from "../tab/tab-group.js";
import Ue from "../tab/tab.js";
import { emojisGrouped as C } from "@dialpad/dialtone-emojis";
import { ARROW_KEYS as H, EMOJIS_PER_ROW as $, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
import Je from "../tooltip/tooltip.js";
import { DialtoneLocalization as Ve } from "../../localization/index.js";
const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
  __name: "emoji_search",
  props: {
    searchPlaceholderLabel: {
      type: String,
      required: !0
    },
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
  setup(o, { expose: g, emit: y }) {
    const l = y, f = S(null);
    function R() {
      l("update:modelValue", ""), L();
    }
    function L() {
      f.value.focus();
    }
    return re(() => {
      L();
    }), g({
      focusSearchInput: L
    }), (I, m) => (E(), j("div", He, [
      B(k(Ne), {
        id: "searchInput",
        ref_key: "searchInput",
        ref: f,
        placeholder: o.searchPlaceholderLabel,
        "model-value": o.modelValue,
        "onUpdate:modelValue": m[0] || (m[0] = (a) => I.$emit("update:modelValue", a)),
        onKeydown: [
          m[1] || (m[1] = J((a) => I.$emit("focus-tabset"), ["up"])),
          m[2] || (m[2] = J(ue((a) => I.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
          m[3] || (m[3] = J((a) => I.$emit("select-first-emoji"), ["enter"]))
        ]
      }, ye({
        leftIcon: N(() => [
          B(k(Ie), { size: "200" })
        ]),
        _: 2
      }, [
        o.modelValue.length > 0 ? {
          name: "rightIcon",
          fn: N(() => [
            B(k(de), {
              importance: "clear",
              size: "xs",
              class: "d-emoji-picker__search-x-button",
              circle: "",
              kind: "muted",
              onClick: R
            }, {
              icon: N(() => [
                B(k(je), { size: "200" })
              ]),
              _: 1
            })
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["placeholder", "model-value"])
    ]));
  }
}, qe = { class: "d-emoji-picker__tabset" }, We = {
  __name: "emoji_tabset",
  props: {
    /**
     * Whether to show the recently used tab or not
     * @type {Boolean}
     * @default false
     */
    showRecentlyUsedTab: {
      type: Boolean,
      default: !1
    },
    /**
     * Whether to show the custom emojis tab or not
     * @type {Boolean}
     * @default false
     */
    showCustomEmojisTab: {
      type: Boolean,
      default: !1
    },
    scrollIntoTab: {
      type: Number,
      required: !0
    },
    emojiFilter: {
      type: String,
      default: ""
    },
    /**
     * The labels for the aria-label
     * @type {Array}
     * @required
     */
    tabSetLabels: {
      type: Array,
      required: !0
    }
  },
  emits: [
    /**
     * Emitted when a tab is selected
     * @event selected-tabset
     * @param {String} tabId - The name of the tab that was selected
     */
    "selected-tabset",
    "focus-search-input",
    "focus-skin-selector"
  ],
  setup(o, { expose: g, emit: y }) {
    const l = o, f = y, R = [
      { label: l.tabSetLabels[0], icon: Re },
      { label: l.tabSetLabels[1], icon: Ae },
      { label: l.tabSetLabels[2], icon: $e },
      { label: l.tabSetLabels[3], icon: we },
      { label: l.tabSetLabels[4], icon: Oe },
      { label: l.tabSetLabels[5], icon: Ce },
      { label: l.tabSetLabels[6], icon: De },
      { label: l.tabSetLabels[7], icon: Fe },
      { label: l.tabSetLabels[8], icon: Be },
      { label: l.tabSetLabels[9], icon: Ke }
    ], L = M(() => {
      const t = l.showRecentlyUsedTab ? R : R.slice(1);
      return l.showCustomEmojisTab || t.pop(), t.map((e, n) => ({
        ...e,
        // IDs on dt-tab component need to be on string
        id: (n + 1).toString(),
        panelId: (n + 1).toString()
      }));
    }), I = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
    K(
      () => l.scrollIntoTab,
      () => {
        I.value || (m.value = (l.scrollIntoTab + 1).toString());
      }
    ), K(
      I,
      () => {
        I.value && (m.value = null);
      }
    );
    function d(t) {
      const e = parseInt(t);
      m.value = t, f("selected-tabset", e);
    }
    function D(t) {
      a.value.push(Me(t.$el));
    }
    function F() {
      a.value[0].focus();
    }
    function w(t, e) {
      t.key === "Enter" && (d(e), a.value[e - 1].blur()), t.key === "Tab" && (t.preventDefault(), t.shiftKey ? f("focus-skin-selector") : f("focus-search-input")), t.key === "ArrowDown" && f("focus-search-input");
    }
    return g({
      focusTabset: F
    }), (t, e) => (E(), j("div", qe, [
      B(k(Pe), {
        selected: m.value,
        size: "sm",
        "tab-list-class": "d-emoji-picker__tabset-list"
      }, {
        tabs: N(() => [
          (E(!0), j(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
            id: n.id,
            key: n.id,
            ref_for: !0,
            ref: (c) => {
              c && D(c);
            },
            label: n.label,
            "panel-id": n.panelId,
            tabindex: v + 1,
            "aria-controls": "d-emoji-picker-list",
            onKeydown: (c) => w(c, n.id),
            onClickCapture: ue((c) => d(n.id), ["stop"])
          }, {
            default: N(() => [
              (E(), Z(Le(n.icon), { size: "400" }))
            ]),
            _: 2
          }, 1032, ["id", "label", "panel-id", "tabindex", "onKeydown", "onClickCapture"]))), 128))
        ]),
        _: 1
      }, 8, ["selected"])
    ]));
  }
};
function Ge() {
  const o = S([]), g = S([]), y = S(!1), l = S(!0);
  function f(t, e) {
    a(t, e - 1) || (o.value[t - 1] ? a(t - 1, o.value[t - 1].length - 1) : a(o.value.length - 1, o.value[o.value.length - 1].length - 1));
  }
  function R(t, e) {
    a(t, e + 1) || a(t + 1, 0) || a(0, 0);
  }
  function L(t, e) {
    a(0, e - 1) || a(0, g.value.length - 1);
  }
  function I(t, e) {
    a(0, e + 1) || a(0, 0);
  }
  function m(t, e, n) {
    y.value ? t === "left" ? L(e, n) : t === "right" && I(e, n) : t === "left" ? f(e, n) : t === "right" && R(e, n);
  }
  function a(t, e) {
    var v, c, T;
    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = o.value) == null ? void 0 : c[t]) == null ? void 0 : T[e];
    return n ? (n.focus(), !0) : !1;
  }
  function d(t, e, n) {
    o.value[e] || (o.value[e] = []), o.value[e][n] = t;
  }
  function D(t, e) {
    g.value[e] = t;
  }
  function F(t, e) {
    var n;
    if (l.value = !1, t === H.ARROW_UP) {
      const v = e % $;
      if (!a(0, e - $)) {
        const c = g.value.length - g.value.length % $ + v;
        a(0, c), a(0, c) || a(0, g.value.length - 1);
      }
    }
    if (t === H.ARROW_DOWN && !a(0, e + $)) {
      const v = e % $;
      (n = g.value) != null && n[e + ($ - v)] ? a(0, g.value.length - 1) : a(0, v);
    }
    t === H.ARROW_LEFT && m("left", 0, e), t === H.ARROW_RIGHT && m("right", 0, e);
  }
  function w(t, e, n) {
    var v, c;
    if (t === "ArrowUp") {
      const T = n % $;
      if (e === 0) {
        const r = $ - o.value[o.value.length - 1].length % $, i = o.value[o.value.length - 1].length + r - ($ - T);
        a(o.value.length - 1, i) || a(o.value.length - 1, o.value[o.value.length - 1].length - 1);
        return;
      }
      if (!a(e, n - $)) {
        const r = e - 1 < 0 ? 0 : e - 1, i = o.value[r].length, _ = i - i % $ + T;
        a(r, _) || a(e - 1, o.value[e - 1].length - 1);
      }
    }
    if (t === "ArrowDown" && !a(e, n + $)) {
      const T = n % $;
      (c = (v = o.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, o.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, o.value[0].length - 1);
    }
    t === "ArrowLeft" && m("left", e, n), t === "ArrowRight" && m("right", e, n);
  }
  return {
    emojiFilteredRefs: g,
    isFiltering: y,
    hoverFirstEmoji: l,
    setEmojiRef: d,
    setFilteredRef: D,
    focusEmoji: a,
    handleArrowNavigationFiltered: F,
    handleArrowNavigation: w
  };
}
const Ye = { class: "d-emoji-picker__selector" }, Qe = {
  key: 0,
  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
}, Xe = { key: 0 }, Ze = { class: "d-emoji-picker__tab" }, xe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], et = ["alt", "aria-label", "title", "src"], tt = {
  key: 2,
  class: "d-emoji-picker__alignment"
}, ot = {
  class: "d-emoji-picker__tab",
  "data-qa": "filtered-emojis"
}, lt = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], st = ["alt", "aria-label", "title", "src"], nt = {
  __name: "emoji_selector",
  props: {
    /**
     * The filter to apply to the emoji list
     * @type {String}
     * @default ''
     */
    emojiFilter: {
      type: String,
      default: ""
    },
    /**
     * The skin tone to apply to the emoji list
     * @type {String}
     * @required
     */
    skinTone: {
      type: String,
      required: !0
    },
    /**
     * The labels for the tabset
     * @type {Array}
     * @required
     */
    tabsetLabels: {
      type: Array,
      required: !0
    },
    selectedTabset: {
      type: Object,
      required: !0
    },
    /**
     * The label for the search results tab
     * @type {String}
     * @required
     */
    searchResultsLabel: {
      type: String,
      required: !0
    },
    searchNoResultsLabel: {
      type: String,
      required: !0
    },
    /**
     * The list of recently used emojis
     * @type {Array}
     */
    recentlyUsedEmojis: {
      type: Array,
      default: () => []
    },
    /**
     * The list of custom emojis
     * @type {Array}
     */
    customEmojis: {
      type: Array,
      default: () => []
    }
  },
  emits: [
    /**
     * Emitted when the user hover over an emoji
     * @event highlighted-emoji
     * @param {Object} emoji - The emoji data that was hovered
      */
    "highlighted-emoji",
    /**
     * Emitted when the user select an emoji
     * @event selected-emoji
     * @param {Object} emoji - The emoji data that was selected
      */
    "selected-emoji",
    /**
     * Emitted when the user scroll into an emoji tab
     * @event scroll-into-tab
     * @param {Number} tab-index - The tab that was scrolled into
      */
    "scroll-into-tab",
    /**
     * Emitted when the user reach bottom scroll
     * This event is used on handleScroll method
     * @event scroll-bottom-reached
     */
    "scroll-bottom-reached",
    /**
     * Emitted when the user reach the end of the emoji list
     * @event focus-skin-selector
      */
    "focus-skin-selector",
    /**
     * Emitted when the user shift tab in first tab of emoji selector
     * @event focus-search-input
      */
    "focus-search-input"
  ],
  setup(o, { expose: g, emit: y }) {
    const l = o, f = y, {
      emojiFilteredRefs: R,
      isFiltering: L,
      hoverFirstEmoji: I,
      setEmojiRef: m,
      setFilteredRef: a,
      focusEmoji: d,
      handleArrowNavigationFiltered: D,
      handleArrowNavigation: F
    } = Ge(), w = S(null), t = S(null), e = S(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], v = M(() => {
      let s = l.tabsetLabels.map((u) => ({ label: u, ref: S(null) }));
      return l.recentlyUsedEmojis && !l.recentlyUsedEmojis.length && (s = l.tabsetLabels.slice(1).map((u) => ({ label: u, ref: S(null) }))), l.customEmojis && !l.customEmojis.length && s.pop(), s;
    }), c = S(v.value[0].label), T = M(() => {
      const s = l.recentlyUsedEmojis.length ? n.slice() : n.slice(1);
      return l.customEmojis && !l.customEmojis.length && s.pop(), s;
    }), r = S([]), i = M(() => [
      ...C[`People${l.skinTone}`],
      ...C.Nature,
      ...C.Food,
      ...C[`Activity${l.skinTone}`],
      ...C.Travel,
      ...C[`Objects${l.skinTone}`],
      ...C.Symbols,
      ...C.Flags
    ]), _ = me(() => {
      R.value = [], se();
    }), le = () => {
      const s = t.value;
      s.scrollTop + s.clientHeight >= s.scrollHeight && f("scroll-bottom-reached");
    };
    K(i, () => {
      se();
    }, { immediate: !0 }), K(
      () => l.recentlyUsedEmojis,
      () => {
        C["Recently used"] = l.recentlyUsedEmojis;
      },
      { immediate: !0 }
    ), K(
      () => l.customEmojis,
      () => {
        C.Custom = l.customEmojis;
      },
      { immediate: !0 }
    ), K(() => l.emojiFilter, () => {
      he(), l.emojiFilter ? L.value = !0 : (L.value = !1, P(null)), _();
    }), K(
      () => l.selectedTabset,
      (s) => {
        q(s.tabId);
      },
      { deep: !0 }
    );
    function ee(s, u = !1) {
      I.value = u, f("highlighted-emoji", s);
    }
    function se() {
      const s = l.emojiFilter.toLowerCase();
      r.value = i.value.filter((u) => {
        const h = u.name.toLowerCase().includes(s), p = u.keywords.some((b) => b.toLowerCase().includes(s));
        return h || p;
      }), x(() => {
        s && ee(r.value[0], !0);
      });
    }
    function me(s, u = 300) {
      let h;
      return (...p) => {
        clearTimeout(h), h = setTimeout(() => s(...p), u);
      };
    }
    function ve(s) {
      return s.date_added ? s.image : Q + s.unicode_character + ".png";
    }
    function be(s) {
      s.target.parentNode.style.display = "none";
    }
    function q(s, u = !0) {
      const p = v.value[s - 1].ref.value[0];
      x(() => {
        const b = t.value, U = s === 1 ? 0 : p.offsetTop - 15;
        b.scrollTop = U, u && d(s - 1, 0);
      });
    }
    function he() {
      const s = t.value;
      s.scrollTop = 0;
    }
    function pe() {
      t.value.addEventListener("scroll", le);
    }
    function _e() {
      e.value = new IntersectionObserver(async (s) => {
        s.forEach((u) => {
          var b, U, O, ne, ie;
          const { target: h } = u, p = parseInt(h.dataset.index);
          u.isIntersecting && h.offsetTop <= w.value.offsetTop + 50 ? (c.value = ((b = v.value[p - 1]) == null ? void 0 : b.label) ?? ((U = v.value[0]) == null ? void 0 : U.label), f("scroll-into-tab", p - 1)) : u.boundingClientRect.bottom <= ((O = w.value) == null ? void 0 : O.getBoundingClientRect().bottom) ? (f("scroll-into-tab", p), c.value = (ne = v.value[p]) == null ? void 0 : ne.label) : p === 1 && (f("scroll-into-tab", p), c.value = (ie = v.value[0]) == null ? void 0 : ie.label);
        });
      }), e.value.observe(w.value), Array.from(t.value.children).forEach((s, u) => {
        e.value.observe(s), s.dataset.index = u;
      });
    }
    const Ee = (s, u, h) => {
      if (s.preventDefault(), Object.values(H).includes(s.key)) {
        D(s.key, u);
        return;
      }
      switch (s.key) {
        case "Tab":
          f("focus-skin-selector");
          break;
        case "Enter":
          X(h, s);
          break;
      }
    }, ke = (s, u, h, p) => {
      if (s.preventDefault(), Object.values(H).includes(s.key)) {
        F(s.key, u, h);
        return;
      }
      switch (s.key) {
        case "Tab":
          s.shiftKey ? d(u, 0) && u > 0 ? q(u, !0) : (q(1, !1), f("focus-search-input")) : d(u + 1, 0) ? q(u + 1 + 1, !1) : f("focus-skin-selector");
          break;
        case "Enter":
          X(p, s);
          break;
      }
    };
    function X(s, u) {
      f("selected-emoji", { ...s, shift_key: u.shiftKey });
    }
    function P(s) {
      f("highlighted-emoji", s);
    }
    function Se() {
      d(0, 0);
    }
    function ge() {
      q(T.value.length, !0);
    }
    return re(() => {
      _e(), pe();
    }), Te(() => {
      e.value.disconnect(), t.value.removeEventListener("scroll", le);
    }), g({
      focusEmojiSelector: Se,
      focusLastEmoji: ge
    }), (s, u) => (E(), j("div", Ye, [
      A("div", {
        id: "d-emoji-picker-list",
        ref_key: "listRef",
        ref: t,
        class: "d-emoji-picker__list"
      }, [
        o.emojiFilter ? (E(), j("p", Qe, z(r.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (E(), j("div", {
          key: 1,
          ref_key: "tabCategoryRef",
          ref: w,
          class: "d-emoji-picker__category d-emoji-picker__alignment"
        }, [
          A("p", null, z(c.value), 1)
        ], 512)),
        (E(!0), j(W, null, G(v.value, (h, p) => te((E(), j("div", {
          key: p,
          ref_for: !0,
          ref: h.ref,
          class: "d-emoji-picker__alignment"
        }, [
          p ? (E(), j("p", Xe, z(h.label), 1)) : Y("", !0),
          A("div", Ze, [
            (E(!0), j(W, null, G(k(C)[T.value[p] + o.skinTone] ? k(C)[T.value[p] + o.skinTone] : k(C)[T.value[p]], (b, U) => (E(), j("button", {
              key: b.shortname,
              ref_for: !0,
              ref: (O) => {
                O && k(m)(O, p, U);
              },
              type: "button",
              "aria-label": b.name,
              onClick: (O) => X(b, O),
              onFocusin: (O) => P(b),
              onFocusout: u[0] || (u[0] = (O) => P(null)),
              onMouseover: (O) => P(b),
              onMouseleave: u[1] || (u[1] = (O) => P(null)),
              onKeydown: (O) => ke(O, p, U, b)
            }, [
              A("img", {
                class: "d-icon d-icon--size-500",
                alt: b.name,
                "aria-label": b.name,
                title: b.name,
                src: ve(b),
                onError: be
              }, null, 40, et)
            ], 40, xe))), 128))
          ])
        ])), [
          [oe, !o.emojiFilter]
        ])), 128)),
        o.emojiFilter ? (E(), j("div", tt, [
          A("div", ot, [
            (E(!0), j(W, null, G(r.value, (h, p) => (E(), j("button", {
              key: h.shortname,
              ref_for: !0,
              ref: (b) => {
                b && k(a)(b, p);
              },
              type: "button",
              "aria-label": h.name,
              class: ce({
                "hover-emoji": p === 0 && k(I)
              }),
              onClick: (b) => X(h, b),
              onFocusin: (b) => P(h),
              onFocusout: u[2] || (u[2] = (b) => P(null)),
              onMouseover: (b) => ee(h),
              onMouseleave: u[3] || (u[3] = (b) => ee(null)),
              onKeydown: (b) => Ee(b, p, h)
            }, [
              A("img", {
                class: "d-icon d-icon--size-500",
                alt: h.name,
                "aria-label": h.name,
                title: h.name,
                src: `${k(Q) + h.unicode_character}.png`
              }, null, 8, st)
            ], 42, lt))), 128))
          ])
        ])) : Y("", !0)
      ], 512)
    ]));
  }
}, it = { "data-qa": "skin-selector" }, at = { class: "d-emoji-picker__skin-list" }, rt = ["onKeydown", "onClick"], ut = ["alt", "aria-label", "title", "src"], ct = { class: "d-emoji-picker__skin-selected" }, ft = ["aria-label"], dt = ["alt", "aria-label", "title", "src"], mt = {
  __name: "emoji_skin_selector",
  props: {
    /**
     * The skin tone to apply to the emoji list
     * @type {String}
     * @required
     */
    skinTone: {
      type: String,
      required: !0
    },
    isHovering: {
      type: Boolean,
      default: !1
    },
    skinSelectorButtonTooltipLabel: {
      type: String,
      required: !0
    }
  },
  emits: [
    /**
     * The skin tone that was selected
     * @event skin-tone
     * @type {Number}
     */
    "skin-tone",
    "focus-tabset",
    "focus-last-emoji"
  ],
  setup(o, { expose: g, emit: y }) {
    const l = o, f = y, R = [
      {
        name: ":wave_tone1:",
        unicode_output: "1f44b-1f3fb",
        skinTone: V.LIGHT,
        skinCode: "_tone1"
      },
      {
        name: ":wave_tone2:",
        unicode_output: "1f44b-1f3fc",
        skinTone: V.MEDIUM_LIGHT,
        skinCode: "_tone2"
      },
      {
        name: ":wave_tone3:",
        unicode_output: "1f44b-1f3fd",
        skinTone: V.MEDIUM,
        skinCode: "_tone3"
      },
      {
        name: ":wave_tone4:",
        unicode_output: "1f44b-1f3fe",
        skinTone: V.MEDIUM_DARK,
        skinCode: "_tone4"
      },
      {
        name: ":wave_tone5:",
        unicode_output: "1f44b-1f3ff",
        skinTone: V.DARK,
        skinCode: "_tone5"
      },
      {
        name: ":wave:",
        unicode_output: "1f44b",
        skinTone: V.DEFAULT,
        skinCode: ""
      }
    ], L = S(!1), I = S(null), m = S([]);
    ae(
      () => l.isHovering && (L.value = !1)
    );
    const a = M(() => R.find((n) => n.skinTone === l.skinTone)), d = S(a.value);
    ae(() => a.value && (d.value = a.value));
    function D(n) {
      m.value.push(n);
    }
    function F() {
      I.value.focus();
    }
    function w(n) {
      d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => F());
    }
    const t = (n, v, c) => {
      var T, r, i;
      n.preventDefault(), n.key === "ArrowLeft" && (c === 0 && ((T = m.value[m.value.length - 1]) == null || T.focus()), (r = m.value[c - 1]) == null || r.focus()), n.key === "ArrowRight" && ((i = m.value[c + 1]) == null || i.focus()), n.key === "Enter" && (v ? w(v) : e()), n.key === "Tab" && (n.shiftKey ? f("focus-last-emoji") : f("focus-tabset"));
    };
    function e() {
      L.value = !L.value, x(() => m.value[0].focus());
    }
    return g({
      focusSkinSelector: F
    }), (n, v) => (E(), j("div", it, [
      te(A("div", at, [
        (E(), j(W, null, G(R, (c, T) => A("button", {
          ref_for: !0,
          ref: (r) => {
            r && D(r);
          },
          key: c.name,
          class: ce({
            selected: d.value.skinCode === c.skinCode
          }),
          onKeydown: (r) => t(r, c, T),
          onClick: (r) => w(c)
        }, [
          A("img", {
            class: "d-icon d-icon--size-500",
            alt: c.name,
            "aria-label": c.name,
            title: c.name,
            src: `${k(Q) + c.unicode_output}.png`
          }, null, 8, ut)
        ], 42, rt)), 64))
      ], 512), [
        [oe, L.value]
      ]),
      te(A("div", ct, [
        B(k(Je), { placement: "top-end" }, {
          anchor: N(() => [
            A("button", {
              ref_key: "skinSelectorRef",
              ref: I,
              "aria-label": o.skinSelectorButtonTooltipLabel,
              tabindex: "-1",
              onClick: e,
              onKeydown: v[0] || (v[0] = (c) => t(c))
            }, [
              A("img", {
                class: "d-icon d-icon--size-500",
                alt: d.value.name,
                "aria-label": d.value.name,
                title: d.value.name,
                src: `${k(Q) + d.value.unicode_output}.png`
              }, null, 8, dt)
            ], 40, ft)
          ]),
          default: N(() => [
            fe(z(o.skinSelectorButtonTooltipLabel) + " ", 1)
          ]),
          _: 1
        })
      ], 512), [
        [oe, !L.value]
      ])
    ]));
  }
}, vt = { class: "d-emoji-picker__data" }, bt = ["alt", "aria-label", "title", "src"], ht = {
  __name: "emoji_description",
  props: {
    /**
     * Emoji data
     * @type {Object}
     * @default null
     */
    emoji: {
      type: Object,
      default: null
    }
  },
  setup(o) {
    function g(y) {
      return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
    }
    return (y, l) => {
      var f;
      return E(), j("div", vt, [
        o.emoji ? (E(), j("img", {
          key: 0,
          class: "d-icon d-icon--size-500",
          alt: o.emoji.name,
          "aria-label": o.emoji.name,
          title: o.emoji.name,
          src: g(o.emoji)
        }, null, 8, bt)) : Y("", !0),
        A("div", null, z((f = o.emoji) == null ? void 0 : f.name), 1)
      ]);
    };
  }
}, pt = { class: "d-emoji-picker" }, _t = { class: "d-emoji-picker--header" }, Et = { class: "d-emoji-picker--body" }, kt = { class: "d-emoji-picker--footer" }, Ot = {
  __name: "emoji_picker",
  props: {
    /**
     * The array with recently used  emoji object
     * This list is necessary to fill the recently used tab
     * @type {Array}
     * @default []
     * @example
     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
     */
    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
    recentlyUsedEmojis: {
      type: Array,
      default: () => []
    },
    /**
       * The array with custom emojis object
       * This list is necessary to fill the custom tab
       * @type {Array}
       * @default []
       * @example
       * <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
       */
    customEmojis: {
      type: Array
    },
    /**
     * The skin tone to show the emojis
     * This prop gives the possibility to use the skin tone selected by the user previously
     * @type {String}
     * @default 'Default'
     * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
     * @example
     * <dt-emoji-picker :skinTone="'Default'" />
     */
    skinTone: {
      type: String,
      default: "Default"
    },
    /**
    
       * Sets the search query that filters emojis.
       * @type {String}
       * @example
       * <dt-emoji-picker search-query="smile" />
       */
    searchQuery: {
      type: String,
      default: ""
    },
    /**
     * Shows the search input
     * @type {Boolean}
     * @example
     * <dt-emoji-picker :show-search="false" />
     */
    showSearch: {
      type: Boolean,
      default: !0
    }
  },
  emits: [
    /**
     * It will emit the selected emoji
     * @event selected-emoji
     * @param {Object} emoji - The selected emoji from the emoji selector
     */
    "selected-emoji",
    /**
    * Emitted when the user reach bottom scroll
    * This is being handled by handleScroll method
    * @event scroll-bottom-reached
    */
    "scroll-bottom-reached",
    /**
     * It will emit the selected skin tone
     * @event skin-tone
     * @param {String} skin - The selected skin tone from the skin selector
     */
    "skin-tone",
    /**
     * Since the keyboard events are encapsulated, we emit this event to close the picker
     * @event close
     */
    "close",
    /**
     * Emitted when the user clicks on the add emoji button
     * @event add-emoji
     */
    "add-emoji"
  ],
  setup(o, { emit: g }) {
    const y = o, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), I = S(0), m = M(() => {
      var r;
      return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
    }), a = M(() => {
      var r;
      return ((r = y.customEmojis) == null ? void 0 : r.length) > 0;
    }), d = new Ve(), D = [
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
      d.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
    ], F = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), w = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), t = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"), e = d.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"), n = d.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
    K(
      () => y.searchQuery,
      (r) => {
        f.value = r;
      }
    );
    function v(r) {
      f.value = "", L.value = { ...L.value, tabId: r };
    }
    function c(r) {
      I.value = r;
    }
    function T(r) {
      R.value = r;
    }
    return (r, i) => (E(), j("div", pt, [
      A("div", _t, [
        B(We, {
          ref: "tabsetRef",
          "emoji-filter": f.value,
          "show-custom-emojis-tab": a.value,
          "show-recently-used-tab": m.value,
          "scroll-into-tab": I.value,
          "tab-set-labels": D,
          onFocusSkinSelector: i[0] || (i[0] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
          onFocusSearchInput: i[1] || (i[1] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
          onSelectedTabset: v,
          onKeydown: i[2] || (i[2] = J((_) => l("close"), ["esc"]))
        }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab"])
      ]),
      A("div", Et, [
        o.showSearch ? (E(), Z(ze, {
          key: 0,
          ref: "searchInputRef",
          modelValue: f.value,
          "onUpdate:modelValue": i[3] || (i[3] = (_) => f.value = _),
          "search-placeholder-label": k(F),
          onSelectFirstEmoji: i[4] || (i[4] = (_) => l("selected-emoji", R.value)),
          onFocusTabset: i[5] || (i[5] = (_) => r.$refs.tabsetRef.focusTabset()),
          onFocusEmojiSelector: i[6] || (i[6] = (_) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
          onKeydown: i[7] || (i[7] = J((_) => l("close"), ["esc"]))
        }, null, 8, ["modelValue", "search-placeholder-label"])) : Y("", !0),
        B(nt, {
          ref: "emojiSelectorRef",
          "emoji-filter": f.value,
          "skin-tone": o.skinTone,
          "tabset-labels": D,
          "search-results-label": k(w),
          "search-no-results-label": k(t),
          "recently-used-emojis": o.recentlyUsedEmojis,
          "custom-emojis": o.customEmojis,
          "selected-tabset": L.value,
          onScrollIntoTab: c,
          onHighlightedEmoji: T,
          onSelectedEmoji: i[8] || (i[8] = (_) => l("selected-emoji", _)),
          onFocusSkinSelector: i[9] || (i[9] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
          onFocusSearchInput: i[10] || (i[10] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
          onKeydown: i[11] || (i[11] = J((_) => l("close"), ["esc"])),
          onScrollBottomReached: i[12] || (i[12] = (_) => l("scroll-bottom-reached"))
        }, null, 8, ["emoji-filter", "skin-tone", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
      ]),
      A("div", kt, [
        a.value && !R.value ? (E(), Z(k(de), {
          key: 0,
          importance: "outlined",
          "aria-label": k(n),
          class: "d-emoji-picker__add-emoji",
          onClick: i[13] || (i[13] = (_) => l("add-emoji"))
        }, {
          default: N(() => [
            fe(z(k(n)), 1)
          ]),
          _: 1
        }, 8, ["aria-label"])) : Y("", !0),
        B(ht, { emoji: R.value }, null, 8, ["emoji"]),
        B(mt, {
          ref: "skinSelectorRef",
          "is-hovering": !!R.value,
          "skin-selector-button-tooltip-label": k(e),
          "skin-tone": o.skinTone,
          onSkinTone: i[14] || (i[14] = (_) => l("skin-tone", _)),
          onFocusTabset: i[15] || (i[15] = (_) => r.$refs.tabsetRef.focusTabset()),
          onFocusLastEmoji: i[16] || (i[16] = (_) => r.$refs.emojiSelectorRef.focusLastEmoji()),
          onKeydown: i[17] || (i[17] = J((_) => l("close"), ["esc"]))
        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
      ])
    ]));
  }
};
export {
  Ot as default
};
//# sourceMappingURL=emoji-picker.js.map
