import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode } from "vue";
import SvgIcon from "./base/SvgIcon.vue.mjs";
import { useRoomStore } from "../../stores/room.mjs";
import { storeToRefs } from "pinia";
import { isUndefined } from "../../utils/utils.mjs";
import MicOnIcon from "./icons/MicOnIcon.vue.mjs";
import MicOffIcon from "./icons/MicOffIcon.vue.mjs";
const _hoisted_1 = { class: "audio-level-container" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "AudioIcon",
  props: {
    userId: {},
    audioVolume: {},
    isMuted: { type: Boolean },
    size: {},
    isDisabled: { type: Boolean }
  },
  setup(__props) {
    const roomStore = useRoomStore();
    const { userVolumeObj } = storeToRefs(roomStore);
    const currentAudioVolume = computed(() => {
      if (!isUndefined(props.audioVolume)) {
        return props.audioVolume;
      }
      if (userVolumeObj.value && props.userId) {
        return userVolumeObj.value[props.userId];
      }
      return 0;
    });
    const props = __props;
    const icon = computed(() => props.isMuted ? MicOffIcon : MicOnIcon);
    const audioLevelStyle = computed(() => {
      if (props.isMuted || !currentAudioVolume.value) {
        return "";
      }
      return `height: ${currentAudioVolume.value * 4}%`;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["audio-icon-container", `${_ctx.size == "small" && "small"}`])
      }, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("div", {
            class: "audio-level",
            style: normalizeStyle(audioLevelStyle.value)
          }, null, 4)
        ]),
        createVNode(SvgIcon, {
          class: "audio-icon",
          icon: icon.value
        }, null, 8, ["icon"])
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
