import { defineComponent, ref, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, toDisplayString, createCommentVNode, withDirectives, createBlock, withModifiers, withCtx, renderSlot, vShow } from "vue";
import "../../../../adapter-vue.mjs";
import { outsideClick } from "@tencentcloud/universal-api";
import Icon from "../../../common/Icon.vue.mjs";
import BottomPopup from "../../../common/BottomPopup/index.vue.mjs";
import { isPC, isUniFrameWork } from "../../../../utils/env.mjs";
import ChatConfig from "../../config.mjs";
const _hoisted_1 = {
  key: 0,
  class: /* @__PURE__ */ normalizeClass(["toolbar-item-container-uni-title"])
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    iconFile: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ""
    },
    needDialog: {
      type: Boolean,
      default: true
    },
    iconWidth: {
      type: String,
      default: "20px"
    },
    iconHeight: {
      type: String,
      default: "20px"
    },
    // Whether to display the bottom popup dialog on mobile devices
    // Invalid on PC
    needBottomPopup: {
      type: Boolean,
      default: false
    }
  },
  emits: ["onIconClick", "onDialogClose", "onDialogShow"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const isDark = ref(ChatConfig.getTheme() === "dark");
    const showDialog = ref(false);
    const toolbarItemRef = ref();
    const dialogRef = ref();
    const toggleToolbarItem = () => {
      emits("onIconClick", dialogRef);
      if (isPC) {
        outsideClick.listen({
          domRefs: toolbarItemRef.value,
          handler: closeToolbarItem
        });
      }
      if (!props.needDialog) {
        return;
      }
      toggleDialogDisplay(!showDialog.value);
    };
    const closeToolbarItem = () => {
      showDialog.value = false;
      emits("onDialogClose", dialogRef);
    };
    const toggleDialogDisplay = (showStatus) => {
      if (showDialog.value === showStatus) {
        return;
      }
      showDialog.value = showStatus;
      switch (showStatus) {
        case true:
          emits("onDialogShow", dialogRef);
          break;
        case false:
          emits("onDialogClose", dialogRef);
      }
    };
    const onPopupClose = () => {
      showDialog.value = false;
    };
    __expose({
      toggleDialogDisplay
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "toolbarItemRef",
        ref: toolbarItemRef,
        class: normalizeClass([
          "toolbar-item-container",
          !unref(isPC) && "toolbar-item-container-h5",
          unref(isUniFrameWork) && "toolbar-item-container-uni"
        ])
      }, [
        createElementVNode("div", {
          class: normalizeClass([
            "toolbar-item-container-icon",
            unref(isUniFrameWork) && "toolbar-item-container-uni-icon"
          ]),
          onClick: toggleToolbarItem
        }, [
          createVNode(Icon, {
            file: props.iconFile,
            class: "icon",
            width: props.iconWidth,
            height: props.iconHeight
          }, null, 8, ["file", "width", "height"])
        ], 2),
        unref(isUniFrameWork) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(props.title), 1)) : createCommentVNode("", true),
        withDirectives(createElementVNode("div", {
          ref_key: "dialogRef",
          ref: dialogRef,
          class: normalizeClass([
            "toolbar-item-container-dialog",
            unref(isDark) && "toolbar-item-container-dialog-dark",
            !unref(isPC) && "toolbar-item-container-h5-dialog",
            unref(isUniFrameWork) && "toolbar-item-container-uni-dialog"
          ])
        }, [
          props.needBottomPopup && !unref(isPC) ? (openBlock(), createBlock(BottomPopup, {
            key: 0,
            class: "toolbar-bottom-popup",
            show: unref(showDialog),
            onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {
            }, ["stop", "prevent"])),
            onOnClose: onPopupClose
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          }, 8, ["show"])) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
        ], 2), [
          [vShow, unref(showDialog)]
        ])
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
