import React from "react";

interface DistanceLinesProps {
  obj: {
    position: {
      top?: number | "auto";
      left?: number | "auto";
      right?: number | "auto";
      bottom?: number | "auto";
    };
  };
  activeEdges: {
    vertical: "top" | "bottom";
    horizontal: "left" | "right";
  } | null;
}

const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
  if (!activeEdges) return null;

  return (
    <>
      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
        <div
          className="distance-line top"
          style={{
            top: 0,
            left:
              activeEdges.horizontal === "left"
                ? `${(obj.position.left as number) + 125}px`
                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
            height: `${obj.position.top}px`,
          }}
        >
          <span className="distance-label">{obj.position.top}px</span>
        </div>
      )}

      {activeEdges.vertical === "bottom" &&
        typeof obj.position.bottom === "number" && (
          <div
            className="distance-line bottom"
            style={{
              bottom: 0,
              left:
                activeEdges.horizontal === "left"
                  ? `${(obj.position.left as number) + 125}px`
                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
              height: `${obj.position.bottom}px`,
            }}
          >
            <span className="distance-label">{obj.position.bottom}px</span>
          </div>
        )}

      {activeEdges.horizontal === "left" &&
        typeof obj.position.left === "number" && (
          <div
            className="distance-line left"
            style={{
              left: 0,
              top:
                activeEdges.vertical === "top"
                  ? `${(obj.position.top as number) + 41.5}px`
                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
              width: `${obj.position.left}px`,
            }}
          >
            <span className="distance-label">{obj.position.left}px</span>
          </div>
        )}

      {activeEdges.horizontal === "right" &&
        typeof obj.position.right === "number" && (
          <div
            className="distance-line right"
            style={{
              right: 0,
              top:
                activeEdges.vertical === "top"
                  ? `${(obj.position.top as number) + 41.5}px`
                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
              width: `${obj.position.right}px`,
            }}
          >
            <span className="distance-label">{obj.position.right}px</span>
          </div>
        )}
    </>
  );
};

export default DistanceLines;