"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlMetricCard = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-namespace */
var react_1 = require("react");
var GlButton_1 = require("../utils/GlButton");
var theme_1 = require("../theme");
var GlLogo_1 = require("../utils/GlLogo");
var GlCard_1 = require("./GlCard");
var theme_2 = require("../theme");
var useNumberCountUpAnimation_1 = require("../tools/useNumberCountUpAnimation");
var useStyles = theme_1.makeStyles()(function (theme) { return ({
    "root": {
        "position": "relative",
        "display": "flex",
        "justifyContent": "space-between",
        "flexDirection": "column",
        "padding": theme.spacing({
            "rightLeft": 3,
            "topBottom": 4,
        }),
        "zIndex": 1,
        "margin": (function () {
            if (theme.windowInnerWidth >= theme_2.breakpointsValues.lg) {
                return undefined;
            }
            return theme.spacing(1);
        })(),
    },
    "subHeading": __assign({ "fontWeight": "normal", "textAlign": "center" }, (function () {
        if (theme.windowInnerWidth >= theme_2.breakpointsValues.lg) {
            return {};
        }
        return {
            "fontSize": "18px",
            "lineHeight": "28px",
        };
    })()),
    "heading": {
        "display": "flex",
        "justifyContent": "center",
        "alignItems": "center",
        "gap": theme.spacing(2),
        "marginBottom": theme.spacing(4),
    },
    "icon": __assign({ "borderRadius": "50%", "padding": theme.spacing(2), "backgroundColor": !theme.isDarkModeEnabled
            ? theme.colors.useCases.surfaces.background
            : theme.colors.palette.light.greyVariant1, "fill": "orange" }, (function () {
        var value = theme.spacing(6.5);
        return {
            "width": value,
            "height": value,
        };
    })()),
    "buttonWrapper": {
        "textAlign": "center",
        "marginTop": theme.spacing(4),
    },
}); });
exports.GlMetricCard = react_1.memo(function (props) {
    var buttonLabel = props.buttonLabel, iconUrl = props.iconUrl, subHeading = props.subHeading, number = props.number, className = props.className, link = props.link, isNumberAnimated = props.isNumberAnimated, timeIntervalBetweenNumbersMs = props.timeIntervalBetweenNumbersMs;
    var _a = useStyles(), classes = _a.classes, cx = _a.cx, theme = _a.theme;
    return (jsx_runtime_1.jsxs(GlCard_1.GlCard, __assign({ link: link, className: cx(classes.root, className) }, { children: [jsx_runtime_1.jsxs("div", __assign({ className: classes.heading }, { children: [number !== undefined && (jsx_runtime_1.jsx(Number, { isNumberAnimated: isNumberAnimated !== null && isNumberAnimated !== void 0 ? isNumberAnimated : false, number: number, timeIntervalBetweenNumbersMs: timeIntervalBetweenNumbersMs !== null && timeIntervalBetweenNumbersMs !== void 0 ? timeIntervalBetweenNumbersMs : 25 }, void 0)),
                    iconUrl !== undefined && (jsx_runtime_1.jsx(GlLogo_1.GlLogo, { fill: theme.colors.useCases.buttons.actionHoverPrimary, className: classes.icon, logoUrl: iconUrl }, void 0))] }), void 0),
            subHeading && (jsx_runtime_1.jsx(theme_1.Text, __assign({ className: classes.subHeading, typo: "subtitle" }, { children: subHeading }), void 0)),
            buttonLabel && (jsx_runtime_1.jsx("div", __assign({ className: classes.buttonWrapper }, { children: jsx_runtime_1.jsx(GlButton_1.GlButton, __assign({ type: "submit", href: link === null || link === void 0 ? void 0 : link.href, variant: "secondary", onClick: link === null || link === void 0 ? void 0 : link.onClick }, { children: buttonLabel }), void 0) }), void 0))] }), void 0));
});
var Number = (function () {
    var useStyles = theme_1.makeStyles()(function (theme) { return ({
        "root": __assign({ "fontSize": "86px" }, (function () {
            if (theme.windowInnerWidth >= theme_2.breakpointsValues.lg) {
                return {};
            }
            return {
                "fontSize": "52px",
            };
        })()),
    }); });
    var Number = react_1.memo(function (props) {
        var isNumberAnimated = props.isNumberAnimated, number = props.number, timeIntervalBetweenNumbersMs = props.timeIntervalBetweenNumbersMs;
        var _a = useNumberCountUpAnimation_1.useNumberCountUpAnimation({
            "intervalMs": timeIntervalBetweenNumbersMs,
            number: number,
        }), ref = _a.ref, renderedNumber = _a.renderedNumber;
        var classes = useStyles().classes;
        return (jsx_runtime_1.jsx(theme_1.Text, __assign({ className: classes.root, typo: "display heading", ref: ref }, { children: isNumberAnimated ? renderedNumber : number }), void 0));
    });
    return { Number: Number };
})().Number;
//# sourceMappingURL=GlMetricCard.js.map