import React from 'react';
import classes from './ResizeIndicator.scss';

interface ResizeIndicatorProps {
  resizePosition: number | undefined;
  isResizing: boolean;
}

export const ResizeIndicator: React.FC<ResizeIndicatorProps> = ({
  resizePosition,
  isResizing,
}) => {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const getResizeIndicatorBounds = (): React.CSSProperties => {
    if (containerRef.current) {
      const listWrapper = containerRef.current.parentElement;
      if (listWrapper) {
        const rect = listWrapper.getBoundingClientRect();
        return {
          left: `${resizePosition}px`,
          top: `${rect.top}px`,
          height: `${rect.height}px`,
        };
      }
    }
    return { left: `${resizePosition}px` };
  };

  return (
    <div ref={containerRef}>
      {isResizing && resizePosition !== undefined && (
        <div
          className={classes.resizeIndicator}
          style={getResizeIndicatorBounds()}
        />
      )}
    </div>
  );
};
