/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useCallback, useEffect, useMemo, useState } from 'react';

export const useResizableDiv = (initialHeight?: number) => {
  const defaultMin = 0;
  const defaultMax = 500;
  const [additionalHeight, setAdditionalHeight] = useState(initialHeight || 0);
  const [startY, setStartY] = useState(0);
  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = (e: any) => {
    setIsDragging(true);
    setStartY(e.clientY);
  };

  const handleMouseMove = useCallback(
    (e: any) => {
      if (!isDragging) return;
      const deltaY = e.clientY - startY;
      setAdditionalHeight(
        Math.min(Math.max(defaultMin, additionalHeight + deltaY), defaultMax)
      );
      setStartY(e.clientY);
    },
    [additionalHeight, startY, isDragging]
  );

  const handleMouseUp = () => {
    console.log('');
    setIsDragging(false);
  };

  useEffect(() => {
    if (isDragging) {
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
    }
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, handleMouseMove, handleMouseUp]);

  const renderResizer = () => {
    return (
      <div
        className='hidden group-hover:block'
        style={{
          position: 'absolute',
          bottom: '10px',
          right: '10px',
          width: '20px',
          height: '20px',
          cursor: 'nwse-resize',
          zIndex: 100,
        }}
        onMouseDown={handleMouseDown}
      >
        <svg
          width='28'
          height='28'
          viewBox='0 0 28 28'
          fill='none'
          xmlns='http://www.w3.org/2000/svg'
        >
          <path
            d='M18 10V12C18 15.3137 15.3137 18 12 18H10'
            stroke={isDragging ? 'white' : 'gray'}
            strokeOpacity='0.8'
            strokeWidth='3'
            strokeLinecap='round'
          />
          <path
            d='M13 12L12.5 12.5L12 13'
            stroke={isDragging ? 'white' : 'gray'}
            strokeOpacity='0.8'
            strokeWidth='3'
            strokeLinecap='round'
          />
        </svg>
      </div>
    );
  };
  return useMemo(() => {
    return { renderResizer, additionalHeight, isDragging };
  }, [renderResizer, additionalHeight, isDragging]);
};