import { defineComponent, ref, createElementBlock, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createVNode } from "vue";
import { useUIKit, TUIButton, IconEnterRoom, TUIInput } from "@tencentcloud/uikit-base-component-vue3";
const _hoisted_1 = { class: "room-button" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  emits: ["join-room"],
  setup(__props, { emit: __emit }) {
    const { t } = useUIKit();
    const emit = __emit;
    const inputVisible = ref(false);
    const roomId = ref("");
    const showInput = () => {
      inputVisible.value = true;
    };
    const handleJoinRoom = () => {
      emit("join-room", roomId.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        !inputVisible.value ? (openBlock(), createBlock(unref(TUIButton), {
          key: 0,
          class: "button",
          type: "primary",
          size: "large",
          icon: unref(IconEnterRoom),
          onClick: showInput
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(unref(t)("Button.JoinRoom")), 1)
          ]),
          _: 1
        }, 8, ["icon"])) : (openBlock(), createBlock(unref(TUIInput), {
          key: 1,
          modelValue: roomId.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => roomId.value = $event),
          size: "large",
          placeholder: unref(t)("Button.EnterRoomId"),
          class: "input",
          border: false,
          onDone: handleJoinRoom
        }, {
          suffix: withCtx(() => [
            createVNode(unref(IconEnterRoom), {
              size: "24",
              class: "icon-button",
              onClick: handleJoinRoom
            })
          ]),
          _: 1
        }, 8, ["modelValue", "placeholder"]))
      ]);
    };
  }
});
export {
  _sfc_main as default
};
