"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const SvgIcon = require("../SvgIcon.vue.js");
const ArrowStrokeSelectDownIcon = require("../../icons/ArrowStrokeSelectDownIcon.vue.js");
const useZIndex = require("../../../../hooks/useZIndex.js");
const vClickOutside = require("../../../../directives/vClickOutside.js");
require("../../../../services/main.js");
const roomService = require("../../../../services/roomService.js");
require("../../../../locales/index.js");
require("@tencentcloud/tuiroom-engine-js");
require("mitt");
require("../../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const _sfc_main = /* @__PURE__ */ Vue.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.default();
    const props = __props;
    const emits = __emit;
    const showSelectDropdown = Vue.ref(false);
    const optionObj = Vue.ref(/* @__PURE__ */ new Map());
    const optionDataList = Vue.computed(() => Array.from(optionObj.value.values()));
    const selectedLabel = Vue.ref("");
    const selectContainerRef = Vue.ref();
    const selectDropDownRef = Vue.ref();
    const dropDirection = Vue.ref("down");
    const themeClass = Vue.computed(
      () => props.theme ? `tui-theme-${props.theme}` : ""
    );
    Vue.watch(
      () => props.modelValue,
      (val) => {
        if (optionObj.value.get(val)) {
          selectedLabel.value = optionObj.value.get(props.modelValue).label;
        }
      },
      { immediate: true }
    );
    Vue.watch(optionDataList, () => {
      if (optionObj.value.get(props.modelValue)) {
        selectedLabel.value = optionObj.value.get(props.modelValue).label;
      }
    });
    const dropDownStyle = Vue.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 = Vue.computed(() => props.modelValue);
    Vue.provide(
      "select",
      Vue.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.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 Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "selectContainerRef",
        ref: selectContainerRef,
        class: Vue.normalizeClass(["select-container", themeClass.value])
      }, [
        Vue.createElementVNode("div", {
          class: Vue.normalizeClass(["select-content", { disabled: _ctx.disabled }]),
          onClick: handleClickSelect
        }, [
          _ctx.$slots.customSelectContent ? Vue.renderSlot(_ctx.$slots, "customSelectContent", { key: 0 }, void 0, true) : (Vue.openBlock(), Vue.createElementBlock("span", {
            key: 1,
            class: "select-text",
            style: Vue.normalizeStyle(props.customSelectContentStyle)
          }, Vue.toDisplayString(selectedLabel.value || selectedValue.value), 5)),
          Vue.createVNode(SvgIcon.default, {
            class: Vue.normalizeClass(["arrow-icon", { reverse: showSelectDropdown.value }]),
            icon: ArrowStrokeSelectDownIcon.default
          }, null, 8, ["class"])
        ], 2),
        Vue.createVNode(Vue.Transition, { name: "select-fade" }, {
          default: Vue.withCtx(() => [
            Vue.withDirectives(Vue.createElementVNode("div", {
              ref_key: "selectDropDownRef",
              ref: selectDropDownRef,
              style: Vue.normalizeStyle(dropDownStyle.value),
              class: Vue.normalizeClass(["select-dropdown-container", dropDirection.value])
            }, [
              Vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ], 6), [
              [Vue.vShow, showSelectDropdown.value]
            ])
          ]),
          _: 3
        })
      ], 2)), [
        [Vue.unref(vClickOutside.default), handleClickOutside]
      ]);
    };
  }
});
exports.default = _sfc_main;
