import React from 'react';
/**
 * Renders a line with arrows on left and right.
 * @constructor
 */
function HorizontalLineWithArrows({ x1, x2, y, label, stroke = 'black', }) {
    const strokeWidth = 2;
    const arrowSize = 7;
    const width = x2 - x1;
    return (React.createElement(React.Fragment, null,
        React.createElement("line", { x1: x1, y1: y, x2: x2, y2: y, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x1, y1: y, x2: x1 + arrowSize, y2: y - arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x1, y1: y, x2: x1 + arrowSize, y2: y + arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x2, y1: y, x2: x2 - arrowSize, y2: y - arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x2, y1: y, x2: x2 - arrowSize, y2: y + arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("text", { x: width * 0.9, y: y + 8, textAnchor: "end", dominantBaseline: "hanging", stroke: "red" }, label)));
}
function Background({ width, height, label, }) {
    const patternId = `pattern+${label.replace(/\s+/g, '-')}`;
    return (React.createElement("svg", { width: width, height: height, style: { position: 'absolute', top: 0, left: 0 } },
        React.createElement("defs", null,
            React.createElement("pattern", { id: patternId, x: 0, y: 0, width: 120, height: 50, patternUnits: "userSpaceOnUse", patternTransform: "rotate(30)" },
                React.createElement("text", { x: 0, y: 10, fontSize: 24, stroke: "#eee", fill: "#eee", dominantBaseline: "hanging" }, label.toUpperCase()))),
        React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: `url(#${patternId})` })));
}
function VerticalLineWithArrows({ x, y1, y2, label, stroke = 'black', }) {
    const strokeWidth = 2;
    const arrowSize = 7;
    const height = y2 - y1;
    return (React.createElement(React.Fragment, null,
        React.createElement("line", { x1: x, y1: y1, x2: x, y2: y2, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x, y1: y1, x2: x - arrowSize, y2: y1 + arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x, y1: y1, x2: x + arrowSize, y2: y1 + arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x, y1: y2, x2: x - arrowSize, y2: y2 - arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("line", { x1: x, y1: y2, x2: x + arrowSize, y2: y2 - arrowSize, stroke: stroke, strokeWidth: strokeWidth }),
        React.createElement("text", { x: x + 8, y: height * 0.7, textAnchor: "start", dominantBaseline: "middle", stroke: "blue" }, label)));
}
/**
 * Creates a label for the horizontal line.
 * It will trim information to save space if the width is too small.
 * @param width number of pixels to display
 * @param label description of the width
 * @return the label to display
 */
function makeHorizontalLabel(width, label) {
    if (width < 50) {
        return String(width);
    }
    if (width < 100) {
        return `${width}px`;
    }
    return `${label}: ${width}px`;
}
export function SvgDimensionShower({ x = 0, y = 0, width, height, labels, }) {
    return (React.createElement("svg", { width: width, height: height, x: x, y: y, style: { pointerEvents: 'none' } },
        React.createElement(Background, { width: width, height: height, label: labels.background }),
        React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: "none", stroke: "green", strokeWidth: 5, strokeDasharray: "3 3" }),
        labels.horizontal && (React.createElement(HorizontalLineWithArrows, { x1: 0, y: height * 0.15, x2: width, stroke: "red", label: makeHorizontalLabel(width, labels.horizontal) })),
        labels.vertical && (React.createElement(VerticalLineWithArrows, { x: width * 0.1, y1: 0, y2: height, stroke: "blue", label: `${labels.vertical}: ${height}px` }))));
}
