import { defineComponent, ref, getCurrentInstance, computed, provide, reactive, onMounted, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
import '../../../hooks/index.mjs';
import { resizableColumnsRootContextKey } from './constants.mjs';
import { resizableColumnsProps } from './resizable-columns2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useOrderedChildren } from '../../../hooks/use-ordered-children/index.mjs';

const _sfc_main = defineComponent({
  name: "ElResizableColumns",
  props: resizableColumnsProps,
  emits: ["collapse", "expand"],
  setup(props, { emit }) {
    const ns = useNamespace("resizable-columns");
    const MIN_WIDTH = props.minWidth > 0 ? props.minWidth : 50;
    const columnsContainer = ref(null);
    const parentWidth = ref(0);
    const {
      children: columns,
      addChild: registerColumn,
      removeChild: unregisterColumn
    } = useOrderedChildren(getCurrentInstance(), "ElResizableColumn");
    const isVertical = computed(() => props.direction === "vertical");
    const columnsKls = computed(() => {
      return [ns.b(), props.direction === "vertical" ? "is-vertical" : "is-horizontal"];
    });
    const handleCollapse = (column) => {
      if (!column.collapsed) {
        for (let rIndex = column.index + 1; rIndex < columns.value.length; rIndex++) {
          const rColumn = columns.value[rIndex];
          if (!rColumn.collapsed) {
            rColumn.left = rColumn.left - column.width;
            rColumn.width = rColumn.width + column.width;
            break;
          } else {
            rColumn.left = rColumn.left - column.width;
          }
        }
        column.collapsed = true;
        emit("collapse", column.index);
      }
    };
    const handleExpand = (column) => {
      if (column.collapsed) {
        column.collapsed = false;
        const rightColumn = columns.value[column.index + 1];
        rightColumn.left = rightColumn.left + column.width;
        rightColumn.width = rightColumn.width > column.width + MIN_WIDTH ? rightColumn.width - column.width : MIN_WIDTH;
        const allOtherColumns = columns.value.slice(column.index + 2);
        const otherWidth = (parentWidth.value - rightColumn.left - rightColumn.width) / allOtherColumns.length;
        allOtherColumns.forEach((item, index) => {
          item.left = index * otherWidth + rightColumn.left + rightColumn.width;
          item.width = otherWidth;
        });
        emit("expand", column.index);
      }
    };
    const initColumnSize = () => {
      let remainWidth = parentWidth.value;
      columns.value.forEach((item, index) => {
        if (item.props.maxWidth) {
          if (item.props.maxWidth.endsWith("px")) {
            item.maxWidth = Number.parseInt(item.props.maxWidth.slice(0, Math.max(0, item.props.maxWidth.length - 2)));
          } else if (item.props.maxWidth.endsWith("%")) {
            item.maxWidth = Number.parseInt(item.props.maxWidth.slice(0, Math.max(0, item.props.maxWidth.length - 1))) / 100 * parentWidth.value;
          }
        }
        if (columns.value.length === 1) {
          item.width = parentWidth.value;
        } else {
          if (item.props.width && item.props.width.endsWith("px")) {
            item.width = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 2)));
          } else if (item.props.width && item.props.width.endsWith("%")) {
            item.width = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 1))) / 100 * parentWidth.value;
          } else {
            item.width = remainWidth / (columns.value.length - index);
          }
        }
        item.left = parentWidth.value - remainWidth;
        remainWidth -= item.width;
        item.index = index;
        item.collapsed = false;
      });
    };
    provide(resizableColumnsRootContextKey, {
      props,
      columns,
      registerColumn,
      unregisterColumn,
      handleCollapse,
      handleExpand,
      initColumnSize
    });
    const resizeConfig = reactive({
      last: {
        pos: 0,
        index: 0
      }
    });
    onMounted(() => {
      if (columnsContainer.value) {
        const resizeObserver = new ResizeObserver((entries) => {
          for (const entry of entries) {
            const width = props.direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height;
            parentWidth.value = width;
            initColumnSize();
          }
        });
        resizeObserver.observe(columnsContainer.value);
      }
    });
    const handleMousedown = (e) => {
      const index = e.target.dataset.index;
      if (index !== null && index !== void 0) {
        if (columns.value[index].collapsed) {
          return;
        }
        document.onselectstart = () => false;
        document.ondragstart = () => false;
        resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
        resizeConfig.last.index = Number.parseInt(index);
        document.addEventListener("mousemove", handleMousemove);
        document.addEventListener("mouseup", handleMouseup);
      }
    };
    const handleMousemove = (e) => {
      const index = resizeConfig.last.index;
      let offsetX = (isVertical.value ? e.clientY : e.clientX) - resizeConfig.last.pos;
      let leftIndex = index;
      while (leftIndex >= 0 && columns.value[leftIndex].width <= MIN_WIDTH) {
        leftIndex--;
      }
      let rightIndex = index + 1;
      while (rightIndex < columns.value.length && columns.value[rightIndex].width <= MIN_WIDTH) {
        rightIndex++;
      }
      if (leftIndex < 0 && offsetX < 0) {
        return;
      }
      if (rightIndex >= columns.value.length && offsetX > 0) {
        return;
      }
      if (offsetX < 0) {
        const newLeftWidth = columns.value[leftIndex].width + offsetX;
        const newRightWidth = columns.value[leftIndex + 1].width - offsetX;
        const rightMaxWidth = columns.value[leftIndex + 1].maxWidth;
        if (newLeftWidth <= MIN_WIDTH) {
          offsetX = MIN_WIDTH - columns.value[leftIndex].width;
          columns.value[leftIndex].width = MIN_WIDTH;
        } else if (rightMaxWidth > 0 && newRightWidth > rightMaxWidth) {
          offsetX = rightMaxWidth - columns.value[leftIndex + 1].width;
          columns.value[leftIndex].width = columns.value[leftIndex].width + offsetX;
        } else {
          columns.value[leftIndex].width = newLeftWidth;
        }
        for (let i = index; i > leftIndex; i--) {
          columns.value[i].left = columns.value[i].left + offsetX;
        }
        columns.value[index + 1].width = columns.value[index + 1].width - offsetX;
        columns.value[index + 1].left = columns.value[index + 1].left + offsetX;
        resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
      } else if (offsetX > 0) {
        const newRightWidth = columns.value[rightIndex].width - offsetX;
        const newLeftWidth = columns.value[rightIndex - 1].width + offsetX;
        const leftMaxWidth = columns.value[rightIndex - 1].maxWidth;
        if (newRightWidth <= MIN_WIDTH) {
          offsetX = columns.value[rightIndex].width - MIN_WIDTH;
          columns.value[rightIndex].width = MIN_WIDTH;
        } else if (leftMaxWidth > 0 && newLeftWidth > leftMaxWidth) {
          offsetX = leftMaxWidth - columns.value[rightIndex - 1].width;
          columns.value[rightIndex].width = columns.value[rightIndex].width - offsetX;
        } else {
          columns.value[rightIndex].width = newRightWidth;
        }
        for (let i = index + 1; i <= rightIndex; i++) {
          columns.value[i].left = columns.value[i].left + offsetX;
        }
        columns.value[index].width = columns.value[index].width + offsetX;
        resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
      }
    };
    const handleMouseup = () => {
      document.onselectstart = null;
      document.ondragstart = null;
      document.removeEventListener("mousemove", handleMousemove);
      document.removeEventListener("mousemove", handleMouseup);
    };
    const setColumnWidth = (columnIndex, width) => {
      setTimeout(() => {
        let remainWidth = parentWidth.value;
        columns.value.forEach((item, index) => {
          if (columnIndex === index) {
            if (width.endsWith("px")) {
              item.width = Number.parseInt(width.slice(0, Math.max(0, width.length - 2)));
            } else if (width && width.endsWith("%")) {
              item.width = Number.parseInt(width.slice(0, Math.max(0, width.length - 1))) / 100 * parentWidth.value;
            } else {
              item.width = remainWidth / (columns.value.length - index);
            }
          } else {
            item.width = remainWidth / (columns.value.length - index);
          }
          item.left = parentWidth.value - remainWidth;
          remainWidth -= item.width;
        });
      });
    };
    const toggleColumnCollapse = (columnIndex, collapse) => {
      setTimeout(() => {
        if (columnIndex >= 0 && columnIndex < columns.value.length - 1) {
          const column = columns.value[columnIndex];
          if (column) {
            const toCol = collapse !== void 0 ? collapse : !column.collapsed;
            if (toCol) {
              handleCollapse(column);
            } else {
              handleExpand(column);
            }
          }
        }
      });
    };
    return {
      ns,
      columnsContainer,
      columnsKls,
      handleMousedown,
      setColumnWidth,
      toggleColumnCollapse
    };
  }
});
const _hoisted_1 = ["widget"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    ref: "columnsContainer",
    class: normalizeClass(_ctx.columnsKls),
    widget: _ctx.widget,
    onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
  }, [
    renderSlot(_ctx.$slots, "default")
  ], 42, _hoisted_1);
}
var ResizableColumns = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-columns.vue"]]);

export { ResizableColumns as default };
//# sourceMappingURL=resizable-columns.mjs.map
