'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "AnnotationOnlyChart", {
    enumerable: true,
    get: function() {
        return AnnotationOnlyChart;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _ChartAnnotationLayer = require("../CommonComponents/Annotations/ChartAnnotationLayer");
const _utilities = require("../../utilities");
const _useAnnotationOnlyChartStylesstyles = require("./useAnnotationOnlyChartStyles.styles");
const _hooks = require("../../utilities/hooks");
const DEFAULT_HEIGHT = 650;
const FALLBACK_WIDTH = 400;
const buildPadding = (margin)=>{
    if (!margin) {
        return undefined;
    }
    var _margin_t;
    const top = (_margin_t = margin.t) !== null && _margin_t !== void 0 ? _margin_t : 0;
    var _margin_r;
    const right = (_margin_r = margin.r) !== null && _margin_r !== void 0 ? _margin_r : 0;
    var _margin_b;
    const bottom = (_margin_b = margin.b) !== null && _margin_b !== void 0 ? _margin_b : 0;
    var _margin_l;
    const left = (_margin_l = margin.l) !== null && _margin_l !== void 0 ? _margin_l : 0;
    if (top === 0 && right === 0 && bottom === 0 && left === 0) {
        return undefined;
    }
    return `${top}px ${right}px ${bottom}px ${left}px`;
};
const AnnotationOnlyChart = (props)=>{
    const { annotations, chartTitle, description, width, height, paperBackgroundColor, plotBackgroundColor, fontColor, fontFamily, margin, componentRef } = props;
    const isRtl = (0, _utilities.useRtl)();
    const classes = (0, _useAnnotationOnlyChartStylesstyles.useAnnotationOnlyChartStyles)();
    const { chartContainerRef: containerRef } = (0, _hooks.useImageExport)(componentRef, true, false);
    const contentRef = _react.useRef(null);
    const [measuredWidth, setMeasuredWidth] = _react.useState(width !== null && width !== void 0 ? width : 0);
    const [contentHeight, setContentHeight] = _react.useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT);
    _react.useEffect(()=>{
        if (typeof width === 'number' && width > 0) {
            setMeasuredWidth(width);
            return;
        }
        const node = containerRef.current;
        if (!node || typeof ResizeObserver === 'undefined') {
            const rect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
            if (rect && rect.width > 0) {
                setMeasuredWidth(rect.width);
            } else {
                setMeasuredWidth((prev)=>prev > 0 ? prev : FALLBACK_WIDTH);
            }
            return;
        }
        const observer = new ResizeObserver((entries)=>{
            const entry = entries[0];
            if (!entry) {
                return;
            }
            const newWidth = entry.contentRect.width;
            if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {
                setMeasuredWidth(newWidth);
            }
        });
        const rect = node.getBoundingClientRect();
        if (rect.width > 0) {
            setMeasuredWidth(rect.width);
        }
        observer.observe(node);
        return ()=>observer.disconnect();
    }, [
        width,
        measuredWidth
    ]);
    const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);
    const resolvedHeight = Math.max(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT, 1);
    _react.useEffect(()=>{
        const node = contentRef.current;
        if (!node) {
            setContentHeight((prev)=>prev > 0 ? prev : resolvedHeight);
            return;
        }
        if (typeof ResizeObserver === 'undefined') {
            const rect = node.getBoundingClientRect();
            setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
            return;
        }
        const observer = new ResizeObserver((entries)=>{
            const entry = entries[0];
            if (!entry) {
                return;
            }
            const newHeight = entry.contentRect.height;
            if (newHeight > 0) {
                setContentHeight((prev)=>Math.abs(prev - newHeight) > 0.5 ? newHeight : prev);
            }
        });
        const rect = node.getBoundingClientRect();
        setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
        observer.observe(node);
        return ()=>observer.disconnect();
    }, [
        resolvedHeight,
        resolvedWidth,
        annotations,
        chartTitle,
        description,
        margin,
        plotBackgroundColor,
        paperBackgroundColor,
        fontColor,
        fontFamily
    ]);
    const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);
    const context = {
        plotRect: {
            x: 0,
            y: 0,
            width: resolvedWidth,
            height: resolvedHeight
        },
        svgRect: {
            width: resolvedWidth,
            height: resolvedHeight
        },
        isRtl
    };
    const padding = buildPadding(margin);
    // Inline styles for dynamic values that can't be in makeStyles
    const rootStyle = _react.useMemo(()=>({
            width: width ? `${width}px` : '100%',
            minHeight: resolvedHeight,
            ...paperBackgroundColor && {
                backgroundColor: paperBackgroundColor
            },
            ...fontColor && {
                color: fontColor
            },
            ...fontFamily && {
                fontFamily
            },
            ...padding && {
                padding
            }
        }), [
        fontColor,
        fontFamily,
        paperBackgroundColor,
        padding,
        resolvedHeight,
        width
    ]);
    const contentStyle = _react.useMemo(()=>({
            ...plotBackgroundColor && {
                backgroundColor: plotBackgroundColor
            }
        }), [
        plotBackgroundColor
    ]);
    const resolvedAnnotations = annotations !== null && annotations !== void 0 ? annotations : [];
    const hasAnnotations = resolvedAnnotations.length > 0;
    const ariaLabel = hasAnnotations ? description !== null && description !== void 0 ? description : chartTitle : undefined;
    return /*#__PURE__*/ _react.createElement("div", {
        ref: containerRef,
        "data-chart-annotation-container": "true"
    }, /*#__PURE__*/ _react.createElement("svg", {
        width: resolvedWidth,
        height: svgHeight,
        viewBox: `0 0 ${resolvedWidth} ${svgHeight}`,
        style: {
            width: width ? `${width}px` : '100%',
            height: `${svgHeight}px`,
            display: 'block'
        },
        role: ariaLabel ? 'img' : undefined,
        "aria-label": ariaLabel
    }, /*#__PURE__*/ _react.createElement("foreignObject", {
        x: 0,
        y: 0,
        width: resolvedWidth,
        height: svgHeight
    }, /*#__PURE__*/ _react.createElement("div", {
        ref: contentRef,
        className: classes.root,
        style: rootStyle,
        "data-chart-annotation-only": "true",
        "aria-label": ariaLabel
    }, chartTitle && /*#__PURE__*/ _react.createElement("span", {
        className: classes.title,
        "aria-hidden": "true"
    }, chartTitle), /*#__PURE__*/ _react.createElement("div", {
        className: classes.content,
        style: contentStyle,
        role: "presentation"
    }, hasAnnotations ? /*#__PURE__*/ _react.createElement(_ChartAnnotationLayer.ChartAnnotationLayer, {
        annotations: resolvedAnnotations,
        context: context,
        hideDefaultStyles: true
    }) : null)))));
};
AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';
