"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");
exports.GlMetricCard = (0, react_1.memo)(function (props) {
    var _a, _b;
    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 _c = useStyles(undefined, { props: props }), classes = _c.classes, cx = _c.cx, theme = _c.theme;
    return ((0, jsx_runtime_1.jsxs)(GlCard_1.GlCard, __assign({ link: link, className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.heading }, { children: [number !== undefined && ((0, jsx_runtime_1.jsx)(Number, { className: (_a = props.classes) === null || _a === void 0 ? void 0 : _a.number, isNumberAnimated: isNumberAnimated !== null && isNumberAnimated !== void 0 ? isNumberAnimated : false, number: number, timeIntervalBetweenNumbersMs: timeIntervalBetweenNumbersMs !== null && timeIntervalBetweenNumbersMs !== void 0 ? timeIntervalBetweenNumbersMs : 25 })), iconUrl !== undefined && ((0, jsx_runtime_1.jsx)(GlLogo_1.GlLogo, { fill: theme.colors.useCases.buttons.actionHoverPrimary, className: classes.icon, logoUrl: iconUrl }))] })), subHeading && ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: classes.subHeading, typo: "subtitle" }, { children: subHeading }))), buttonLabel && ((0, jsx_runtime_1.jsx)("div", __assign({ className: classes.buttonWrapper }, { children: (0, jsx_runtime_1.jsx)(GlButton_1.GlButton, __assign({ className: (_b = props.classes) === null || _b === void 0 ? void 0 : _b.button, 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 })) })))] })));
});
var useStyles = (0, theme_1.makeStyles)({ "name": { GlMetricCard: exports.GlMetricCard } })(function (theme) { return ({
    "root": {
        "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": theme.colors.useCases.buttons.actionActive }, (function () {
        var value = theme.spacing(6.5);
        return {
            "width": value,
            "height": value,
        };
    })()),
    "buttonWrapper": {
        "textAlign": "center",
        "marginTop": theme.spacing(4),
    },
    "number": {},
    "button": {},
}); });
var Number = (function () {
    var Number = (0, react_1.memo)(function (props) {
        var isNumberAnimated = props.isNumberAnimated, number = props.number, timeIntervalBetweenNumbersMs = props.timeIntervalBetweenNumbersMs, className = props.className;
        var _a = (0, useNumberCountUpAnimation_1.useNumberCountUpAnimation)({
            "intervalMs": timeIntervalBetweenNumbersMs,
            number: number,
        }), ref = _a.ref, renderedNumber = _a.renderedNumber;
        var _b = useStyles(), classes = _b.classes, cx = _b.cx;
        return ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: cx(classes.root, className), typo: "display heading", ref: ref }, { children: isNumberAnimated ? renderedNumber : number })));
    });
    var useStyles = (0, theme_1.makeStyles)({ "name": { Number: Number } })(function (theme) { return ({
        "root": __assign({ "fontSize": "86px" }, (function () {
            if (theme.windowInnerWidth >= theme_2.breakpointsValues.lg) {
                return {};
            }
            return {
                "fontSize": "52px",
            };
        })()),
    }); });
    return { Number: Number };
})().Number;
//# sourceMappingURL=GlMetricCard.js.map