admin/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts

import { ref } from 'vue';

interface DragOptions {
  max: number;
  min: number;
}

interface DragElements {
  dragBar: HTMLElement | null;
  target: HTMLElement | null;
}

type DragCallback = (newWidth: number) => void;

export function useSidebarDrag() {
  const isDragging = ref(false);
  let cleanup: (() => void) | null = null;
  let dragOverlay: HTMLElement | null = null;

  const startDrag = (
    e: MouseEvent,
    options: DragOptions,
    elements: DragElements,
    onDrag: DragCallback,
  ) => {
    const { min, max } = options;
    const { dragBar, target } = elements;

    if (isDragging.value || !dragBar || !target) return;

    e.preventDefault();
    e.stopPropagation();

    isDragging.value = true;

    const startX = e.clientX;
    const startWidth = target.getBoundingClientRect().width;
    const startLeft = dragBar.offsetLeft;

    dragBar.classList.add('bg-primary');
    dragBar.classList.remove('bg-primary/30');

    const dragBarTransition = dragBar.style.transition;
    const targetTransition = target.style.transition;

    dragBar.style.transition = 'none';
    target.style.transition = 'none';

    dragOverlay = document.createElement('div');
    dragOverlay.style.position = 'fixed';
    dragOverlay.style.inset = '0';
    dragOverlay.style.zIndex = '9999';
    dragOverlay.style.cursor = 'col-resize';
    dragOverlay.style.userSelect = 'none';
    dragOverlay.style.outline = 'none';
    dragOverlay.tabIndex = -1;
    dragOverlay.style.background = 'rgba(0,0,0,0)';
    document.body.append(dragOverlay);

    const onMouseMove = (moveEvent: MouseEvent) => {
      if (!isDragging.value || !dragBar || !target) {
        endDrag();
        return;
      }

      const deltaX = moveEvent.clientX - startX;
      let currentWidth = startWidth + deltaX;

      const isOutOfMin = currentWidth < min;
      const isOutOfMax = currentWidth > max;
      const isOutOfBounds = isOutOfMin || isOutOfMax;

      if (isOutOfMin) currentWidth = min;
      if (isOutOfMax) currentWidth = max;

      const newLeft = startLeft + (currentWidth - startWidth);

      if (dragOverlay)
        dragOverlay.style.cursor = isOutOfBounds ? 'not-allowed' : 'col-resize';

      dragBar.style.left = `${newLeft}px`;

      if (isOutOfBounds) {
        dragBar.classList.add('bg-primary/30');
        dragBar.classList.remove('bg-primary');
      } else {
        dragBar.classList.add('bg-primary');
        dragBar.classList.remove('bg-primary/30');
      }
    };

    const onMouseUp = (upEvent: MouseEvent) => {
      if (!isDragging.value || !dragBar || !target) {
        endDrag();
        return;
      }

      const deltaX = upEvent.clientX - startX;
      let newWidth = startWidth + deltaX;

      newWidth = Math.min(max, Math.max(min, newWidth));

      dragBar.classList.remove('bg-primary', 'bg-primary/30');

      try {
        onDrag?.(Math.round(newWidth));
      } finally {
        endDrag();
      }
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    cleanup = () => {
      if (!cleanup) return;

      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);

      if (dragBar) {
        dragBar.style.transition = dragBarTransition;
        dragBar.style.left = '';
        dragBar.classList.remove('bg-primary', 'bg-primary/30');
      }

      if (target) {
        target.style.transition = targetTransition;
      }

      if (dragOverlay) {
        dragOverlay.remove();
        dragOverlay = null;
      }

      isDragging.value = false;
      cleanup = null;
    };
  };

  const endDrag = () => {
    cleanup?.();
  };

  return {
    startDrag,
    endDrag,
    get isDragging() {
      return isDragging.value;
    },
  };
}