import { defineComponent, ref, computed, watch, provide, reactive, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, toDisplayString, createVNode, Transition, withCtx, vShow, unref } from "vue";
import SvgIcon from "../SvgIcon.vue.mjs";
import ArrowStrokeSelectDownIcon from "../../icons/ArrowStrokeSelectDownIcon.vue.mjs";
import useZIndex from "../../../../hooks/useZIndex.mjs";
import vClickOutside from "../../../../directives/vClickOutside.mjs";
import "../../../../services/main.mjs";
import { roomService } from "../../../../services/roomService.mjs";
import "../../../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "mitt";
import "../../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "SelectPC",
  props: {
    modelValue: { type: [String, Number, Boolean, Object] },
    disabled: { type: Boolean },
    theme: {},
    customSelectContentStyle: { type: [Boolean, null, String, Object, Array] }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const { nextZIndex } = useZIndex();
    const props = __props;
    const emits = __emit;
    const showSelectDropdown = ref(false);
    const optionObj = ref(/* @__PURE__ */ new Map());
    const optionDataList = computed(() => Array.from(optionObj.value.values()));
    const selectedLabel = ref("");
    const selectContainerRef = ref();
    const selectDropDownRef = ref();
    const dropDirection = ref("down");
    const themeClass = computed(
      () => props.theme ? `tui-theme-${props.theme}` : ""
    );
    watch(
      () => props.modelValue,
      (val) => {
        if (optionObj.value.get(val)) {
          selectedLabel.value = optionObj.value.get(props.modelValue).label;
        }
      },
      { immediate: true }
    );
    watch(optionDataList, () => {
      if (optionObj.value.get(props.modelValue)) {
        selectedLabel.value = optionObj.value.get(props.modelValue).label;
      }
    });
    const dropDownStyle = ref({});
    function onOptionCreated(option) {
      optionObj.value.set(option.value, option);
    }
    function onOptionDestroyed(value) {
      optionObj.value.delete(value);
    }
    function onOptionSelected(option) {
      showSelectDropdown.value = false;
      emits("update:modelValue", option.value);
      emits("change", option.value);
    }
    const selectedValue = computed(() => props.modelValue);
    provide(
      "select",
      reactive({
        selectedValue,
        optionObj,
        optionDataList,
        onOptionCreated,
        onOptionDestroyed,
        onOptionSelected
      })
    );
    function handleClickSelect() {
      if (props.disabled) {
        return;
      }
      if (showSelectDropdown.value) {
        showSelectDropdown.value = false;
      } else {
        handleDropDownPosition();
        dropDownStyle.value = { zIndex: nextZIndex() };
        showSelectDropdown.value = true;
        optionObj.value.get(props.modelValue).ref.scrollIntoView({ block: "center" });
      }
    }
    function handleDropDownPosition() {
      var _a;
      const { top, bottom } = selectContainerRef.value.getBoundingClientRect() || {};
      const container = roomService.getRoomContainer();
      const bottomSize = container instanceof HTMLElement ? container.offsetHeight - bottom : -1;
      let dropDownContainerHeight = 0;
      if (!showSelectDropdown.value) {
        selectDropDownRef.value.style = "display:block;position:absolute;z-index:-1000";
        dropDownContainerHeight = selectDropDownRef.value.offsetHeight;
        selectDropDownRef.value.style = "";
      } else {
        dropDownContainerHeight = (_a = selectDropDownRef.value) == null ? void 0 : _a.offsetHeight;
      }
      if (bottomSize < top && bottomSize < dropDownContainerHeight) {
        dropDirection.value = "up";
      }
    }
    function handleClickOutside() {
      if (showSelectDropdown.value) {
        showSelectDropdown.value = false;
      }
    }
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createElementBlock("div", {
        ref_key: "selectContainerRef",
        ref: selectContainerRef,
        class: normalizeClass(["select-container", themeClass.value])
      }, [
        createElementVNode("div", {
          class: normalizeClass(["select-content", { disabled: _ctx.disabled }]),
          onClick: handleClickSelect
        }, [
          _ctx.$slots.customSelectContent ? renderSlot(_ctx.$slots, "customSelectContent", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("span", {
            key: 1,
            class: "select-text",
            style: normalizeStyle(props.customSelectContentStyle)
          }, toDisplayString(selectedLabel.value || selectedValue.value), 5)),
          createVNode(SvgIcon, {
            class: normalizeClass(["arrow-icon", { reverse: showSelectDropdown.value }]),
            icon: ArrowStrokeSelectDownIcon
          }, null, 8, ["class"])
        ], 2),
        createVNode(Transition, { name: "select-fade" }, {
          default: withCtx(() => [
            withDirectives(createElementVNode("div", {
              ref_key: "selectDropDownRef",
              ref: selectDropDownRef,
              style: normalizeStyle(dropDownStyle.value),
              class: normalizeClass(["select-dropdown-container", dropDirection.value])
            }, [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ], 6), [
              [vShow, showSelectDropdown.value]
            ])
          ]),
          _: 3
        })
      ], 2)), [
        [unref(vClickOutside), handleClickOutside]
      ]);
    };
  }
});
export {
  _sfc_main as default
};
