import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useRef } from "react";
import { CSS_PREFIX, DEFAULT_PROPS, EMPTY_CHART_SERIE } from "./constants";
import { Svg, Wrapper, Tooltip, Overlay, OverlayMessage } from "./styled";
import { useD3StakedChart } from "./hooks";
import { getTooltipClass } from "./utils";
const D3StakedChart = (props) => {
    const svgRef = useRef(null);
    const { serie } = props;
    const isWaitingForData = !serie.data || serie.data.length === 0;
    const propsWithDefaults = {
        ...DEFAULT_PROPS,
        ...props,
        svgRef,
    };
    const { height, width } = propsWithDefaults;
    if (isWaitingForData) {
        propsWithDefaults.serie = EMPTY_CHART_SERIE;
    }
    useD3StakedChart(propsWithDefaults);
    return (_jsxs(Wrapper, { height: height, width: width, className: `${CSS_PREFIX}wrapper`, children: [_jsx(Svg, { height: height, width: width, className: `${CSS_PREFIX}svg`, ref: svgRef, opacity: isWaitingForData ? 0.2 : 1 }), _jsx(Tooltip, { color: "#E8662D", className: `${CSS_PREFIX}tooltip ${getTooltipClass(propsWithDefaults.title)}` }), isWaitingForData && _jsx(Overlay, { color: "#000" }), isWaitingForData && (_jsx(OverlayMessage, { color: "#E8662D", fontFamily: "Bold", fontSize: 16, children: "Nothing to show yet" }))] }));
};
const areEqual = (prevProps, nextProps) => {
    let result = true;
    const prev = prevProps.serie.data;
    const next = nextProps.serie.data;
    if (prev.length !== next.length)
        return false;
    const size = prev.length;
    if (JSON.stringify(prev[0]) !== JSON.stringify(next[0])) {
        result = false;
    }
    if (JSON.stringify(prev[size - 1]) !== JSON.stringify(next[size - 1])) {
        result = false;
    }
    return result;
};
export default React.memo(D3StakedChart, areEqual);
//# sourceMappingURL=index.js.map