import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import { EventType } from "../../services/types.mjs";
import "../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import interact from "interactjs";
const setDragAndResize = (domSelect) => {
  const minWidth = 830;
  const minHeight = 630;
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  interact(domSelect).draggable({
    onstart: (event) => {
      const { target } = event;
      target.style.margin = "initial";
    },
    onmove: (event) => {
      const { target } = event;
      let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
      let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
      x = Math.min(
        screenWidth - target.offsetWidth + minWidth - 100,
        Math.max(-minWidth + 100, x)
      );
      y = Math.min(
        screenHeight - target.offsetHeight + minHeight - 100,
        Math.max(-minHeight + 100, y)
      );
      target.style.transform = `translate(${x}px, ${y}px)`;
      target.setAttribute("data-x", x);
      target.setAttribute("data-y", y);
    }
  }).resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move(event) {
        let { x, y } = event.target.dataset;
        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;
        const width = Math.max(minWidth, event.rect.width);
        const height = Math.max(minHeight, event.rect.height);
        Object.assign(event.target.style, {
          width: `${width}px`,
          height: `${height}px`,
          transform: `translate(${x}px, ${y}px)`
        });
        Object.assign(event.target.dataset, { x, y });
        roomService.emit(EventType.ROOM_CONTAINER_RESIZE);
      }
    }
  }).styleCursor(true);
};
export {
  setDragAndResize
};
