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"
              style={{
                position: "absolute",
                top: "50%",
                transform: "translate(-50%,0%)",
              }}
            >
              {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"
              style={{
                position: "absolute",
                bottom: "50%",
                transform: "translate(-50%,0%)",
              }}
            >
              {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"
              style={{
                position: "absolute",
                left: "50%",
                transform: "translate(0,-50%)",
              }}
            >
              {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"
              style={{
                position: "absolute",
                right: "50%",
                transform: "translate(0,-50%)",
              }}
            >
              {obj.position.right}px
            </span>
          </div>
        )}
    </>
  );
};

export default DistanceLines;
