import { defineComponent, ref, openBlock, createElementBlock, createVNode, withModifiers, withDirectives, normalizeClass, unref, Fragment, renderList, createElementVNode, vShow } from "vue";
import { emojiList, emojiBaseUrl, emojiMap } from "../util.mjs";
import { isMobile } from "../../../utils/environment.mjs";
import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
import EmojiIcon from "../../common/icons/EmojiIcon.vue.mjs";
import vClickOutside from "../../../directives/vClickOutside.mjs";
const _hoisted_1 = { class: "emoji-tool" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "emojiPC",
  emits: ["choose-emoji"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const showEmojiToolbar = ref(false);
    const chooseEmoji = (itemName) => {
      const emojiInfo = itemName;
      emit("choose-emoji", emojiInfo);
    };
    const handleEmojiToobar = () => {
      showEmojiToolbar.value = !showEmojiToolbar.value;
    };
    const handleClickOutsideEmojiToobar = () => {
      if (showEmojiToolbar.value) {
        showEmojiToolbar.value = false;
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(SvgIcon, {
          icon: EmojiIcon,
          class: "emoji-icon",
          onClick: withModifiers(handleEmojiToobar, ["stop"])
        }),
        withDirectives((openBlock(), createElementBlock("div", {
          class: normalizeClass(unref(isMobile) ? "emoji-list-h5" : "emoji-list")
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojiList), (childrenItem, childrenIndex) => {
            return openBlock(), createElementBlock("div", {
              key: childrenIndex,
              class: "emoji-item",
              onClick: ($event) => chooseEmoji(childrenItem)
            }, [
              createElementVNode("img", {
                src: unref(emojiBaseUrl) + unref(emojiMap)[childrenItem]
              }, null, 8, _hoisted_3)
            ], 8, _hoisted_2);
          }), 128))
        ], 2)), [
          [vShow, showEmojiToolbar.value],
          [unref(vClickOutside), handleClickOutsideEmojiToobar]
        ])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
