"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartTooltip = void 0;
var react_1 = __importDefault(require("react"));
var ramda_1 = require("ramda");
var styles_1 = require("./styles");
var ChartTooltip = function (_a) {
    var _b;
    var payload = _a.payload, active = _a.active;
    var styles = (0, styles_1.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_1.default.createElement("div", { "data-reltio-id": "chart-tooltip", className: styles.tooltipWrapper },
        react_1.default.createElement("p", { className: styles.tooltipTitle }, tooltipLabel),
        (0, ramda_1.isNil)(percent) ? (react_1.default.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValue },
            "Value: ",
            localizedValue)) : (react_1.default.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValueBold },
            localizedValue,
            react_1.default.createElement("span", { className: styles.tooltipPercent },
                " (",
                percent,
                "%)"))))));
};
exports.ChartTooltip = ChartTooltip;
