import { defineComponent, ref, computed, unref, withDirectives, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
import { LAYOUT } from "../../../constants/render.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import { storeToRefs } from "pinia";
import { useI18n } from "../../../locales/index.mjs";
import { IconButtonLayout } from "../../../constants/room.mjs";
import IconButton from "../../common/base/IconButton.vue.mjs";
import LayoutIcon from "../../common/icons/LayoutIcon.vue.mjs";
import vClickOutside from "../../../directives/vClickOutside.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
const _hoisted_1 = {
  key: 0,
  class: "layout-container"
};
const _hoisted_2 = {
  key: 0,
  class: "layout-list"
};
const _hoisted_3 = { class: "layout-block-container" };
const _hoisted_4 = { class: "layout-title" };
const _hoisted_5 = { class: "layout-block-container" };
const _hoisted_6 = { class: "right-container" };
const _hoisted_7 = { class: "layout-title" };
const _hoisted_8 = { class: "layout-block-container" };
const _hoisted_9 = { class: "top-container" };
const _hoisted_10 = { class: "layout-title" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "LayoutControl",
  setup(__props) {
    const { t } = useI18n();
    const basicStore = useBasicStore();
    const { layout } = storeToRefs(basicStore);
    const roomStore = useRoomStore();
    const { streamNumber } = storeToRefs(roomStore);
    const showLayoutList = ref(false);
    const isStreamNumberLessThanTwo = computed(() => streamNumber.value < 2);
    const layoutControlConfig = roomService.getComponentConfig("LayoutControl");
    function handleClick(layout2) {
      basicStore.setLayout(layout2);
    }
    function handleClickLayoutIcon() {
      if (isStreamNumberLessThanTwo.value) {
        return;
      }
      showLayoutList.value = !showLayoutList.value;
    }
    function handleClickOutSide() {
      if (showLayoutList.value) {
        showLayoutList.value = false;
      }
    }
    return (_ctx, _cache) => {
      return unref(layoutControlConfig).visible ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(IconButton, {
          title: unref(t)("Layout"),
          disabled: isStreamNumberLessThanTwo.value,
          layout: unref(IconButtonLayout).HORIZONTAL,
          onClickIcon: handleClickLayoutIcon
        }, {
          default: withCtx(() => [
            createVNode(LayoutIcon)
          ]),
          _: 1
        }, 8, ["title", "disabled", "layout"]),
        showLayoutList.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
          createElementVNode("div", {
            class: normalizeClass([
              "layout1",
              "layout-item",
              `${unref(layout) === unref(LAYOUT).NINE_EQUAL_POINTS ? "checked" : ""}`
            ]),
            onClick: _cache[0] || (_cache[0] = ($event) => handleClick(unref(LAYOUT).NINE_EQUAL_POINTS))
          }, [
            createElementVNode("div", _hoisted_3, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(new Array(9).fill(""), (item, index) => {
                return openBlock(), createElementBlock("div", {
                  key: index,
                  class: "layout-block"
                });
              }), 128))
            ]),
            createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("Grid")), 1)
          ], 2),
          createElementVNode("div", {
            class: normalizeClass([
              "layout2",
              "layout-item",
              `${unref(layout) === unref(LAYOUT).RIGHT_SIDE_LIST ? "checked" : ""}`
            ]),
            onClick: _cache[1] || (_cache[1] = ($event) => handleClick(unref(LAYOUT).RIGHT_SIDE_LIST))
          }, [
            createElementVNode("div", _hoisted_5, [
              _cache[3] || (_cache[3] = createElementVNode("div", { class: "left-container" }, null, -1)),
              createElementVNode("div", _hoisted_6, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(new Array(3).fill(""), (item, index) => {
                  return openBlock(), createElementBlock("div", {
                    key: index,
                    class: "layout-block"
                  });
                }), 128))
              ])
            ]),
            createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("Gallery on right")), 1)
          ], 2),
          createElementVNode("div", {
            class: normalizeClass([
              "layout3",
              "layout-item",
              `${unref(layout) === unref(LAYOUT).TOP_SIDE_LIST ? "checked" : ""}`
            ]),
            onClick: _cache[2] || (_cache[2] = ($event) => handleClick(unref(LAYOUT).TOP_SIDE_LIST))
          }, [
            createElementVNode("div", _hoisted_8, [
              createElementVNode("div", _hoisted_9, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(new Array(3).fill(""), (item, index) => {
                  return openBlock(), createElementBlock("div", {
                    key: index,
                    class: "layout-block"
                  });
                }), 128))
              ]),
              _cache[4] || (_cache[4] = createElementVNode("div", { class: "bottom-container" }, null, -1))
            ]),
            createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("Gallery at top")), 1)
          ], 2)
        ])) : createCommentVNode("", true)
      ])), [
        [unref(vClickOutside), handleClickOutSide]
      ]) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
