import React from 'react';
import { isNil } from 'ramda';
import { useStyles } from './styles';
export var ChartTooltip = function (_a) {
    var _b;
    var payload = _a.payload, active = _a.active;
    var styles = useStyles();
    var tooltipPayload = (_b = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _b === void 0 ? void 0 : _b.payload;
    var localizedValue = (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.localizedValue) || (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.value);
    var tooltipLabel = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.label;
    var percent = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.percent;
    return (active && (React.createElement("div", { "data-reltio-id": "chart-tooltip", className: styles.tooltipWrapper },
        React.createElement("p", { className: styles.tooltipTitle }, tooltipLabel),
        isNil(percent) ? (React.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValue },
            "Value: ",
            localizedValue)) : (React.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValueBold },
            localizedValue,
            React.createElement("span", { className: styles.tooltipPercent },
                " (",
                percent,
                "%)"))))));
};
