import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, toDisplayString, unref, withDirectives, vModelText, createTextVNode, normalizeClass, createCommentVNode } from "vue";
import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import useRoomControl from "./useRoomControlHooks.mjs";
import vTap from "../../../directives/vTap.mjs";
import CreateRoomIcon from "../../common/icons/CreateRoomIcon.vue.mjs";
import EnterRoomIcon from "../../common/icons/EnterRoomIcon.vue.mjs";
import ArrowStrokeBackIcon from "../../common/icons/ArrowStrokeBackIcon.vue.mjs";
import ArrowStrokeSelectDownIcon from "../../common/icons/ArrowStrokeSelectDownIcon.vue.mjs";
import ScheduleRoomIcon from "../../common/icons/ScheduleRoomIcon.vue.mjs";
import ScheduleRoomList from "../../ScheduleConference/ScheduleRoomList.vue.mjs";
import ScheduleConferencePanel from "../../ScheduleConference/ScheduleConferencePanel/index.mjs";
import renderMsg from "../../common/base/Message/Message.mjs";
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__ */ defineComponent({
  __name: "RoomControlH5",
  props: {
    userName: {},
    givenRoomId: {}
  },
  emits: ["create-room", "enter-room", "update-user-name"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const { t } = useRoomControl();
    const moreTypeRef = ref();
    const roomStore = useRoomStore();
    const showRoomDetail = ref(false);
    const showMoreType = ref(false);
    const showScheduleRoom = ref(false);
    const isJoinRoom = ref(false);
    const roomType = computed(
      () => mode.value === "FreeToSpeak" ? t("Free Speech Room") : t("On-stage Speaking Room")
    );
    const isMicOn = ref(true);
    const isCamerOn = ref(true);
    const mode = ref("FreeToSpeak");
    const tuiRoomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
      defaultCameraId: "",
      defaultMicrophoneId: "",
      defaultSpeakerId: ""
    };
    const emit = __emit;
    const props = __props;
    __expose({
      getRoomParam
    });
    const currentUserName = ref(
      props.userName || `user_${Math.ceil(Math.random() * 10)}`
    );
    const currentRoomId = ref(props.givenRoomId);
    const hasGivenRoomId = 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)) {
            renderMsg({
              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;
      }
    }
    onMounted(() => {
      document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
    });
    onUnmounted(() => {
      document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", {
            class: "button-item",
            onClick: enterRoom
          }, [
            createVNode(SvgIcon, {
              class: "button-icon",
              icon: EnterRoomIcon
            }),
            createElementVNode("span", null, toDisplayString(unref(t)("Join Room")), 1)
          ]),
          createElementVNode("div", {
            class: "button-item",
            onClick: createRoom
          }, [
            createVNode(SvgIcon, {
              class: "button-icon",
              icon: CreateRoomIcon
            }),
            createElementVNode("span", null, toDisplayString(unref(t)("New Room")), 1)
          ]),
          createElementVNode("div", {
            class: "button-item",
            onClick: scheduleRoom
          }, [
            createVNode(SvgIcon, {
              class: "button-icon",
              icon: ScheduleRoomIcon
            }),
            createElementVNode("span", null, toDisplayString(unref(t)("Schedule")), 1)
          ])
        ]),
        createElementVNode("div", _hoisted_3, [
          createVNode(ScheduleRoomList, {
            onJoinConference: _cache[0] || (_cache[0] = ($event) => handleRoomOption("Join", $event))
          })
        ]),
        showRoomDetail.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
          createElementVNode("div", _hoisted_5, [
            withDirectives(createVNode(SvgIcon, {
              class: "close-icon",
              icon: ArrowStrokeBackIcon
            }, null, 512), [
              [unref(vTap), handleClose]
            ]),
            isJoinRoom.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(t)("Join Room")), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(unref(t)("New Room")), 1))
          ]),
          createElementVNode("div", _hoisted_8, [
            createElementVNode("div", _hoisted_9, [
              isJoinRoom.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
                createElementVNode("span", _hoisted_11, toDisplayString(unref(t)("Room ID")), 1),
                withDirectives(createElementVNode("input", {
                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentRoomId.value = $event),
                  class: "roomid-input",
                  type: "number",
                  placeholder: unref(t)("Enter room ID"),
                  maxlength: "10",
                  enterkeyhint: "complete",
                  onKeyup: handleInput
                }, null, 40, _hoisted_12), [
                  [vModelText, currentRoomId.value]
                ])
              ])) : (openBlock(), createElementBlock("div", {
                key: 1,
                class: "room-detail-info-box",
                onClick: chooseRoomType
              }, [
                createElementVNode("span", _hoisted_13, toDisplayString(unref(t)("Room Type")), 1),
                createElementVNode("div", _hoisted_14, [
                  createElementVNode("span", _hoisted_15, toDisplayString(roomType.value), 1)
                ]),
                createVNode(SvgIcon, {
                  class: "chevron-down-icon",
                  icon: ArrowStrokeSelectDownIcon
                })
              ])),
              createElementVNode("div", _hoisted_16, [
                createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Your Name")), 1),
                withDirectives(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), [
                  [vModelText, currentUserName.value]
                ])
              ])
            ]),
            createElementVNode("div", _hoisted_18, [
              createElementVNode("div", _hoisted_19, [
                createTextVNode(toDisplayString(unref(t)("Turn on the microphone")) + " ", 1),
                withDirectives((openBlock(), createElementBlock("div", {
                  class: normalizeClass(["slider-box", [isMicOn.value && "slider-open"]])
                }, _cache[5] || (_cache[5] = [
                  createElementVNode("span", { class: "slider-block" }, null, -1)
                ]), 2)), [
                  [unref(vTap), () => toggle("isMicOn")]
                ])
              ]),
              createElementVNode("div", _hoisted_20, [
                createTextVNode(toDisplayString(unref(t)("Turn on the video")) + " ", 1),
                withDirectives((openBlock(), createElementBlock("div", {
                  class: normalizeClass(["slider-box", [isCamerOn.value && "slider-open"]])
                }, _cache[6] || (_cache[6] = [
                  createElementVNode("span", { class: "slider-block" }, null, -1)
                ]), 2)), [
                  [unref(vTap), () => toggle("isCamerOn")]
                ])
              ])
            ])
          ]),
          createElementVNode("div", _hoisted_21, [
            isJoinRoom.value || hasGivenRoomId.value ? withDirectives((openBlock(), createElementBlock("span", _hoisted_22, [
              createTextVNode(toDisplayString(unref(t)("Join Room")), 1)
            ])), [
              [unref(vTap), () => handleRoomOption("Join")]
            ]) : withDirectives((openBlock(), createElementBlock("span", _hoisted_23, [
              createTextVNode(toDisplayString(unref(t)("New Room")), 1)
            ])), [
              [unref(vTap), () => handleRoomOption("New")]
            ])
          ])
        ])) : createCommentVNode("", true),
        showMoreType.value ? (openBlock(), createElementBlock("div", _hoisted_24, [
          createElementVNode("div", {
            ref_key: "moreTypeRef",
            ref: moreTypeRef,
            class: normalizeClass([
              showMoreType.value ? "room-type-container" : "close-room-type-container"
            ])
          }, [
            createElementVNode("div", _hoisted_25, [
              createElementVNode("span", {
                class: "choose-cancel",
                onClick: _cache[3] || (_cache[3] = ($event) => showMoreType.value = false)
              }, toDisplayString(unref(t)("Cancel")), 1),
              withDirectives((openBlock(), createElementBlock("span", _hoisted_26, [
                createTextVNode(toDisplayString(unref(t)("Sure")), 1)
              ])), [
                [unref(vTap), handleConfirm]
              ])
            ]),
            createElementVNode("div", _hoisted_27, [
              withDirectives((openBlock(), createElementBlock("span", {
                class: normalizeClass([[mode.value === "FreeToSpeak" && "room-current-title"], "room-choose-title"])
              }, [
                createTextVNode(toDisplayString(unref(t)("Free Speech Room")), 1)
              ], 2)), [
                [unref(vTap), () => chooseCurrentType("FreeToSpeak")]
              ]),
              withDirectives((openBlock(), createElementBlock("span", {
                class: normalizeClass([[mode.value === "SpeakAfterTakingSeat" && "room-current-title"], "room-choose-title"])
              }, [
                createTextVNode(toDisplayString(unref(t)("On-stage Speaking Room")), 1)
              ], 2)), [
                [unref(vTap), () => chooseCurrentType("SpeakAfterTakingSeat")]
              ])
            ])
          ], 2)
        ])) : createCommentVNode("", true),
        createVNode(unref(ScheduleConferencePanel), {
          "user-name": props.userName,
          onInput: _cache[4] || (_cache[4] = ($event) => showScheduleRoom.value = $event),
          visible: showScheduleRoom.value
        }, null, 8, ["user-name", "visible"])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
