"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const SvgIcon = require("../../common/base/SvgIcon.vue.js");
const room = require("../../../stores/room.js");
const useRoomControlHooks = require("./useRoomControlHooks.js");
const vTap = require("../../../directives/vTap.js");
const CreateRoomIcon = require("../../common/icons/CreateRoomIcon.vue.js");
const EnterRoomIcon = require("../../common/icons/EnterRoomIcon.vue.js");
const ArrowStrokeBackIcon = require("../../common/icons/ArrowStrokeBackIcon.vue.js");
const ArrowStrokeSelectDownIcon = require("../../common/icons/ArrowStrokeSelectDownIcon.vue.js");
const ScheduleRoomIcon = require("../../common/icons/ScheduleRoomIcon.vue.js");
const ScheduleRoomList = require("../../ScheduleConference/ScheduleRoomList.vue.js");
const index = require("../../ScheduleConference/ScheduleConferencePanel/index.js");
const Message = require("../../common/base/Message/Message.js");
const _hoisted_1 = { class: "control-container" };
const _hoisted_2 = { class: "container-button-group" };
const _hoisted_3 = { class: "conference-list-container" };
const _hoisted_4 = {
  key: 0,
  class: "room-detail"
};
const _hoisted_5 = { class: "room-detail-header" };
const _hoisted_6 = {
  key: 0,
  class: "room-detail-header-title"
};
const _hoisted_7 = {
  key: 1,
  class: "room-detail-header-title"
};
const _hoisted_8 = { class: "room-detail-middle" };
const _hoisted_9 = { class: "room-detail-info" };
const _hoisted_10 = {
  key: 0,
  class: "room-detail-info-box"
};
const _hoisted_11 = { class: "room-detail-title" };
const _hoisted_12 = ["placeholder"];
const _hoisted_13 = { class: "room-detail-title" };
const _hoisted_14 = { class: "room-show-title" };
const _hoisted_15 = { class: "room-show-title" };
const _hoisted_16 = { class: "room-detail-info-box" };
const _hoisted_17 = { class: "room-detail-title" };
const _hoisted_18 = { class: "room-detail-setting" };
const _hoisted_19 = { class: "room-detail-setting-list" };
const _hoisted_20 = { class: "room-detail-setting-list" };
const _hoisted_21 = { class: "room-detail-bottom" };
const _hoisted_22 = {
  key: 0,
  class: "button"
};
const _hoisted_23 = {
  key: 1,
  class: "button"
};
const _hoisted_24 = {
  key: 1,
  class: "room-choose-mobile"
};
const _hoisted_25 = { class: "room-choose-button" };
const _hoisted_26 = { class: "choose-confirm" };
const _hoisted_27 = { class: "room-type-hidden" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "RoomControlH5",
  props: {
    userName: {},
    givenRoomId: {}
  },
  emits: ["create-room", "enter-room", "update-user-name"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const { t } = useRoomControlHooks.default();
    const moreTypeRef = Vue.ref();
    const roomStore = room.useRoomStore();
    const showRoomDetail = Vue.ref(false);
    const showMoreType = Vue.ref(false);
    const showScheduleRoom = Vue.ref(false);
    const isJoinRoom = Vue.ref(false);
    const roomType = Vue.computed(
      () => mode.value === "FreeToSpeak" ? t("Free Speech Room") : t("On-stage Speaking Room")
    );
    const isMicOn = Vue.ref(true);
    const isCamerOn = Vue.ref(true);
    const mode = Vue.ref("FreeToSpeak");
    const tuiRoomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
      defaultCameraId: "",
      defaultMicrophoneId: "",
      defaultSpeakerId: ""
    };
    const emit = __emit;
    const props = __props;
    __expose({
      getRoomParam
    });
    const currentUserName = Vue.ref(
      props.userName || `user_${Math.ceil(Math.random() * 10)}`
    );
    const currentRoomId = Vue.ref(props.givenRoomId);
    const hasGivenRoomId = Vue.computed(
      () => typeof currentRoomId.value === "string" && currentRoomId.value !== ""
    );
    function createRoom() {
      showRoomDetail.value = !showRoomDetail.value;
      isJoinRoom.value = false;
    }
    function enterRoom() {
      showRoomDetail.value = !showRoomDetail.value;
      isJoinRoom.value = true;
    }
    function scheduleRoom() {
      showScheduleRoom.value = !showScheduleRoom.value;
    }
    function chooseRoomType() {
      showMoreType.value = !showMoreType.value;
    }
    function chooseCurrentType(roomType2) {
      mode.value = roomType2;
    }
    function handleConfirm() {
      showMoreType.value = !showMoreType.value;
    }
    function handleClose() {
      currentRoomId.value = "";
      showRoomDetail.value = false;
      showMoreType.value = false;
    }
    function toggle(type) {
      switch (type) {
        case "isMicOn":
          isMicOn.value = !isMicOn.value;
          tuiRoomParam.isOpenMicrophone = isMicOn.value;
          break;
        case "isCamerOn":
          isCamerOn.value = !isCamerOn.value;
          tuiRoomParam.isOpenCamera = isCamerOn.value;
          break;
      }
    }
    function getRoomParam() {
      tuiRoomParam.defaultCameraId = roomStore.currentCameraId;
      tuiRoomParam.defaultMicrophoneId = roomStore.currentMicrophoneId;
      tuiRoomParam.defaultSpeakerId = roomStore.currentSpeakerId;
      return tuiRoomParam;
    }
    function handleInput(e) {
      currentRoomId.value = e.target.value;
    }
    function handleInputName(e) {
      currentUserName.value = e.target.value;
    }
    function handleDocumentClick(event) {
      if (showMoreType.value && !moreTypeRef.value.contains(event.target)) {
        showMoreType.value = false;
      }
    }
    function handleRoomOption(type, params) {
      emit("update-user-name", currentUserName.value);
      const roomParam = getRoomParam();
      switch (type) {
        case "Join":
          if (!currentRoomId.value && !(params == null ? void 0 : params.roomId)) {
            Message.default({
              type: "error",
              message: t("Please enter the room number")
            });
            return;
          }
          emit(
            "enter-room",
            params || {
              roomId: String(currentRoomId.value),
              roomParam
            }
          );
          break;
        case "New":
          emit("create-room", {
            roomMode: mode.value,
            roomParam,
            isSeatEnabled: Boolean(mode.value === "SpeakAfterTakingSeat")
          });
          break;
      }
    }
    Vue.onMounted(() => {
      document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
    });
    Vue.onUnmounted(() => {
      document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
        Vue.createElementVNode("div", _hoisted_2, [
          Vue.createElementVNode("div", {
            class: "button-item",
            onClick: enterRoom
          }, [
            Vue.createVNode(SvgIcon.default, {
              class: "button-icon",
              icon: EnterRoomIcon.default
            }),
            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
          ]),
          Vue.createElementVNode("div", {
            class: "button-item",
            onClick: createRoom
          }, [
            Vue.createVNode(SvgIcon.default, {
              class: "button-icon",
              icon: CreateRoomIcon.default
            }),
            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("New Room")), 1)
          ]),
          Vue.createElementVNode("div", {
            class: "button-item",
            onClick: scheduleRoom
          }, [
            Vue.createVNode(SvgIcon.default, {
              class: "button-icon",
              icon: ScheduleRoomIcon.default
            }),
            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Schedule")), 1)
          ])
        ]),
        Vue.createElementVNode("div", _hoisted_3, [
          Vue.createVNode(ScheduleRoomList.default, {
            onJoinConference: _cache[0] || (_cache[0] = ($event) => handleRoomOption("Join", $event))
          })
        ]),
        showRoomDetail.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
          Vue.createElementVNode("div", _hoisted_5, [
            Vue.withDirectives(Vue.createVNode(SvgIcon.default, {
              class: "close-icon",
              icon: ArrowStrokeBackIcon.default
            }, null, 512), [
              [Vue.unref(vTap.default), handleClose]
            ]),
            isJoinRoom.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("New Room")), 1))
          ]),
          Vue.createElementVNode("div", _hoisted_8, [
            Vue.createElementVNode("div", _hoisted_9, [
              isJoinRoom.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_10, [
                Vue.createElementVNode("span", _hoisted_11, Vue.toDisplayString(Vue.unref(t)("Room ID")), 1),
                Vue.withDirectives(Vue.createElementVNode("input", {
                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentRoomId.value = $event),
                  class: "roomid-input",
                  type: "number",
                  placeholder: Vue.unref(t)("Enter room ID"),
                  maxlength: "10",
                  enterkeyhint: "complete",
                  onKeyup: handleInput
                }, null, 40, _hoisted_12), [
                  [Vue.vModelText, currentRoomId.value]
                ])
              ])) : (Vue.openBlock(), Vue.createElementBlock("div", {
                key: 1,
                class: "room-detail-info-box",
                onClick: chooseRoomType
              }, [
                Vue.createElementVNode("span", _hoisted_13, Vue.toDisplayString(Vue.unref(t)("Room Type")), 1),
                Vue.createElementVNode("div", _hoisted_14, [
                  Vue.createElementVNode("span", _hoisted_15, Vue.toDisplayString(roomType.value), 1)
                ]),
                Vue.createVNode(SvgIcon.default, {
                  class: "chevron-down-icon",
                  icon: ArrowStrokeSelectDownIcon.default
                })
              ])),
              Vue.createElementVNode("div", _hoisted_16, [
                Vue.createElementVNode("span", _hoisted_17, Vue.toDisplayString(Vue.unref(t)("Your Name")), 1),
                Vue.withDirectives(Vue.createElementVNode("input", {
                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentUserName.value = $event),
                  class: "roomid-input",
                  enterkeyhint: "complete",
                  maxlength: "16",
                  minlength: "1",
                  onKeyup: handleInputName
                }, null, 544), [
                  [Vue.vModelText, currentUserName.value]
                ])
              ])
            ]),
            Vue.createElementVNode("div", _hoisted_18, [
              Vue.createElementVNode("div", _hoisted_19, [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Turn on the microphone")) + " ", 1),
                Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
                  class: Vue.normalizeClass(["slider-box", [isMicOn.value && "slider-open"]])
                }, _cache[5] || (_cache[5] = [
                  Vue.createElementVNode("span", { class: "slider-block" }, null, -1)
                ]), 2)), [
                  [Vue.unref(vTap.default), () => toggle("isMicOn")]
                ])
              ]),
              Vue.createElementVNode("div", _hoisted_20, [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Turn on the video")) + " ", 1),
                Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
                  class: Vue.normalizeClass(["slider-box", [isCamerOn.value && "slider-open"]])
                }, _cache[6] || (_cache[6] = [
                  Vue.createElementVNode("span", { class: "slider-block" }, null, -1)
                ]), 2)), [
                  [Vue.unref(vTap.default), () => toggle("isCamerOn")]
                ])
              ])
            ])
          ]),
          Vue.createElementVNode("div", _hoisted_21, [
            isJoinRoom.value || hasGivenRoomId.value ? Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_22, [
              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
            ])), [
              [Vue.unref(vTap.default), () => handleRoomOption("Join")]
            ]) : Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_23, [
              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("New Room")), 1)
            ])), [
              [Vue.unref(vTap.default), () => handleRoomOption("New")]
            ])
          ])
        ])) : Vue.createCommentVNode("", true),
        showMoreType.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_24, [
          Vue.createElementVNode("div", {
            ref_key: "moreTypeRef",
            ref: moreTypeRef,
            class: Vue.normalizeClass([
              showMoreType.value ? "room-type-container" : "close-room-type-container"
            ])
          }, [
            Vue.createElementVNode("div", _hoisted_25, [
              Vue.createElementVNode("span", {
                class: "choose-cancel",
                onClick: _cache[3] || (_cache[3] = ($event) => showMoreType.value = false)
              }, Vue.toDisplayString(Vue.unref(t)("Cancel")), 1),
              Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_26, [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Sure")), 1)
              ])), [
                [Vue.unref(vTap.default), handleConfirm]
              ])
            ]),
            Vue.createElementVNode("div", _hoisted_27, [
              Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", {
                class: Vue.normalizeClass([[mode.value === "FreeToSpeak" && "room-current-title"], "room-choose-title"])
              }, [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Free Speech Room")), 1)
              ], 2)), [
                [Vue.unref(vTap.default), () => chooseCurrentType("FreeToSpeak")]
              ]),
              Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", {
                class: Vue.normalizeClass([[mode.value === "SpeakAfterTakingSeat" && "room-current-title"], "room-choose-title"])
              }, [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("On-stage Speaking Room")), 1)
              ], 2)), [
                [Vue.unref(vTap.default), () => chooseCurrentType("SpeakAfterTakingSeat")]
              ])
            ])
          ], 2)
        ])) : Vue.createCommentVNode("", true),
        Vue.createVNode(Vue.unref(index.default), {
          "user-name": props.userName,
          onInput: _cache[4] || (_cache[4] = ($event) => showScheduleRoom.value = $event),
          visible: showScheduleRoom.value
        }, null, 8, ["user-name", "visible"])
      ]);
    };
  }
});
exports.default = _sfc_main;
