import { ref, computed, watch, nextTick, mergeProps, toHandlers, createVNode } from "vue";
import "./styles/draggable-resizable.scss";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { makeDraggableProps, useDraggable } from "../../composables/draggable/index.mjs";
import { makeDraggableResizableProps, useDraggableResizable } from "../../composables/draggable-resizable/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { Tooltip } from "../tooltip/tooltip.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { convertToUnit } from "../../utils/dist/index.mjs";
const DraggableResizable = defineComponent({
  name: "VeDraggableResizable",
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        left: 0,
        top: 0
      })
    },
    tooltip: {
      type: Boolean,
      default: true
    },
    ...makeDraggableProps(),
    ...makeDraggableResizableProps(),
    ...makeTagProps()
  },
  emits: {
    "update:modelValue": (_value) => true
  },
  setup(props, {
    slots
  }) {
    const rootEl = ref();
    const model = useProxiedModel(props, "modelValue", props.modelValue, (v) => ({
      left: (v == null ? void 0 : v.left) ? parseFloat(v == null ? void 0 : v.left) : 0,
      top: (v == null ? void 0 : v.top) ? parseFloat(v == null ? void 0 : v.top) : 0,
      ...props.resizable ? {
        width: (v == null ? void 0 : v.width) ? parseFloat(v == null ? void 0 : v.width) : void 0,
        height: (v == null ? void 0 : v.height) ? parseFloat(v == null ? void 0 : v.height) : void 0
      } : void 0
    }));
    const previous = ref({
      ...model.value
    });
    const {
      isDragging,
      draggableEvents,
      draggableMovement
    } = useDraggable(props);
    const {
      isResizing,
      resizement,
      genResizableAnchors
    } = useDraggableResizable(props);
    const styles = computed(() => {
      const sharedProps = {
        width: convertToUnit(model.value.width),
        height: convertToUnit(model.value.height)
      };
      if (props.position) {
        return {
          ...sharedProps,
          position: props.position,
          top: convertToUnit(model.value.top),
          left: convertToUnit(model.value.left)
        };
      }
      return {
        ...sharedProps,
        transform: `translate3d(${convertToUnit(model.value.left)}, ${convertToUnit(model.value.top)}, 0)`
      };
    });
    watch(rootEl, async (el) => {
      if (!el || !props.resizable)
        return;
      await nextTick();
      const box = el.getBoundingClientRect();
      if (!model.value.width)
        previous.value.width = box.width;
      if (!model.value.height)
        previous.value.height = box.height;
      if (!model.value.width || !model.value.height) {
        model.value = {
          ...model.value,
          width: previous.value.width,
          height: previous.value.height
        };
      }
    });
    watch([isDragging, isResizing], ([isDragging2, isResizing2]) => {
      if (props.draggable && !isDragging2 || props.resizable && !isResizing2) {
        previous.value = {
          ...model.value
        };
      }
    });
    watch(draggableMovement, (val) => {
      if (!props.draggable || !isDragging.value || !val)
        return;
      model.value = {
        ...model.value,
        top: previous.value.top + val.top,
        left: previous.value.left + val.left
      };
    });
    watch(resizement, (val) => {
      var _a, _b, _c, _d;
      if (!props.resizable || !isResizing.value)
        return;
      model.value = {
        ...model.value,
        top: previous.value.top + val.top,
        left: previous.value.left + val.left,
        width: ((_b = (_a = previous.value) == null ? void 0 : _a.width) != null ? _b : 0) + val.width,
        height: ((_d = (_c = previous.value) == null ? void 0 : _c.height) != null ? _d : 0) + val.height
      };
    });
    return () => {
      const draggable = mergeProps(toHandlers(draggableEvents.value), {
        class: "ve-draggable-resizable__draggable"
      });
      const resizable = {
        style: {
          width: convertToUnit(model.value.width),
          height: convertToUnit(model.value.height)
        }
      };
      return createVNode(props.tag, mergeProps({
        "ref": rootEl,
        "class": ["ve-draggable-resizable", {
          "ve-draggable-resizable--dragging": isDragging.value,
          "ve-draggable-resizable--resizing": isResizing.value
        }],
        "style": styles.value
      }, draggable), {
        default: () => {
          var _a, _b, _c;
          return [slots.default && createVNode("div", {
            "class": "ve-draggable-resizable__wrapper"
          }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
            value: model.value,
            draggable,
            resizable,
            props: mergeProps(draggable, resizable)
          })]), createVNode(Tooltip, {
            "arrow": false,
            "modelValue": props.tooltip && isResizing.value,
            "openOnHover": false,
            "positionStrategy": "pointer",
            "scrollStrategy": "none",
            "text": `${parseInt((_b = model.value.width) != null ? _b : 0)} x ${parseInt((_c = model.value.height) != null ? _c : 0)}`
          }, {
            activator: props.resizable ? ({
              on: anchorProps
            }) => genResizableAnchors(anchorProps, isDragging) : void 0
          })];
        }
      });
    };
  }
});
export {
  DraggableResizable
};
//# sourceMappingURL=draggable-resizable.mjs.map
