import type { ComputedRef, Ref } from 'vue';

import { onBeforeUnmount, ref, watch } from 'vue';

export function useModalResizable(
  targetRef: Ref<HTMLElement | undefined>,
  resizable: ComputedRef<boolean>,
  containerSelector?: ComputedRef<string | undefined>,
) {
  const resizing = ref(false);
  const handleRef = ref<HTMLElement>();

  function onMousedown(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();

    const target = targetRef.value;
    if (!target) return;

    const startX = e.clientX;
    const startY = e.clientY;
    const startWidth = target.offsetWidth;
    const startHeight = target.offsetHeight;
    const startLeft = target.getBoundingClientRect().left;
    const startTop = target.getBoundingClientRect().top;

    resizing.value = true;
    document.body.style.cursor = 'nwse-resize';
    document.body.style.userSelect = 'none';

    const onMousemove = (e: MouseEvent) => {
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;

      let newWidth = Math.max(startWidth, startWidth + deltaX);
      let newHeight = Math.max(startHeight, startHeight + deltaY);

      if (containerSelector?.value) {
        const container = document.querySelector(containerSelector.value);
        if (container) {
          const containerRect = container.getBoundingClientRect();
          newWidth = Math.min(newWidth, containerRect.right - startLeft);
          newHeight = Math.min(newHeight, containerRect.bottom - startTop);
        }
      } else {
        const docElement = document.documentElement;
        newWidth = Math.min(newWidth, docElement.clientWidth - startLeft);
        newHeight = Math.min(newHeight, docElement.clientHeight - startTop);
      }

      target.style.width = `${newWidth}px`;
      target.style.height = `${newHeight}px`;

      const currentLeft = target.getBoundingClientRect().left;
      const currentTop = target.getBoundingClientRect().top;
      if (currentLeft !== startLeft || currentTop !== startTop) {
        const offsetX = currentLeft - startLeft;
        const offsetY = currentTop - startTop;
        const transform = target.style.transform || '';
        const matchX = transform.match(/translate\(([-\d.]+)px/);
        const matchY = transform.match(/translate\([-\d.]+px,\s*([-\d.]+)px/);
        const currentTranslateX = matchX && matchX[1] ? Number.parseFloat(matchX[1]) : 0;
        const currentTranslateY = matchY && matchY[1] ? Number.parseFloat(matchY[1]) : 0;
        const newTranslateX = currentTranslateX - offsetX;
        const newTranslateY = currentTranslateY - offsetY;
        target.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
      }
    };

    const onMouseup = () => {
      resizing.value = false;
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      document.removeEventListener('mousemove', onMousemove);
      document.removeEventListener('mouseup', onMouseup);
    };

    document.addEventListener('mousemove', onMousemove);
    document.addEventListener('mouseup', onMouseup);
  }

  function addHandle() {
    const target = targetRef.value;
    if (!target || handleRef.value) return;

    const handle = document.createElement('div');
    handle.className = 'modal-resize-handle';
    Object.assign(handle.style, {
      position: 'absolute',
      right: '2px',
      bottom: '2px',
      width: '18px',
      height: '18px',
      cursor: 'nwse-resize',
      zIndex: '10',
    });

    handle.addEventListener('mousedown', onMousedown);
    target.append(handle);
    handleRef.value = handle;
  }

  function removeHandle() {
    if (handleRef.value) {
      handleRef.value.removeEventListener('mousedown', onMousedown);
      handleRef.value.remove();
      handleRef.value = undefined;
    }
  }

  function resetSize() {
    const target = targetRef.value;
    if (target) {
      target.style.width = '';
      target.style.height = '';
      target.style.transform = '';
    }
  }

  watch(
    () => targetRef.value,
    (target) => {
      if (target && resizable.value) {
        addHandle();
      } else {
        removeHandle();
      }
    },
    { immediate: true },
  );

  watch(resizable, (val) => {
    if (val && targetRef.value) {
      addHandle();
    } else {
      removeHandle();
    }
  });

  onBeforeUnmount(() => {
    removeHandle();
  });

  return {
    resizing,
    resetSize,
  };
}