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);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-namespace */
import { memo } from "react";
import { GlButton } from "../utils/GlButton";
import { tss, Text } from "../theme";
import { GlLogo } from "../utils/GlLogo";
import { GlCard } from "./GlCard";
import { breakpointsValues } from "../theme";
import { useNumberCountUpAnimation } from "../tools/useNumberCountUpAnimation";
export var GlMetricCard = 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({
        "classesOverrides": props.classes,
    }), classes = _c.classes, cx = _c.cx, theme = _c.theme;
    return (_jsxs(GlCard, __assign({ link: link, className: cx(classes.root, className) }, { children: [_jsxs("div", __assign({ className: classes.heading }, { children: [number !== undefined && (_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 && (_jsx(GlLogo, { fill: theme.colors.useCases.buttons.actionHoverPrimary, className: classes.icon, logoUrl: iconUrl }))] })), subHeading && (_jsx(Text, __assign({ className: classes.subHeading, typo: "subtitle" }, { children: subHeading }))), buttonLabel && (_jsx("div", __assign({ className: classes.buttonWrapper }, { children: _jsx(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 = tss.withName({ GlMetricCard: GlMetricCard }).create(function (_a) {
    var theme = _a.theme;
    return ({
        "root": {
            "display": "flex",
            "justifyContent": "space-between",
            "flexDirection": "column",
            "padding": theme.spacing({
                "rightLeft": 3,
                "topBottom": 4,
            }),
            "margin": (function () {
                if (theme.windowInnerWidth >= breakpointsValues.lg) {
                    return undefined;
                }
                return theme.spacing(1);
            })(),
        },
        "subHeading": __assign({ "fontWeight": "normal", "textAlign": "center" }, (function () {
            if (theme.windowInnerWidth >= 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 = memo(function (props) {
        var isNumberAnimated = props.isNumberAnimated, number = props.number, timeIntervalBetweenNumbersMs = props.timeIntervalBetweenNumbersMs, className = props.className;
        var _a = useNumberCountUpAnimation({
            "intervalMs": timeIntervalBetweenNumbersMs,
            number: number,
        }), ref = _a.ref, renderedNumber = _a.renderedNumber;
        var _b = useStyles(), classes = _b.classes, cx = _b.cx;
        return (_jsx(Text, __assign({ className: cx(classes.root, className), typo: "display heading", ref: ref }, { children: isNumberAnimated ? renderedNumber : number })));
    });
    var useStyles = tss.withName({ Number: Number }).create(function (_a) {
        var theme = _a.theme;
        return ({
            "root": __assign({ "fontSize": "86px" }, (function () {
                if (theme.windowInnerWidth >= breakpointsValues.lg) {
                    return {};
                }
                return {
                    "fontSize": "52px",
                };
            })()),
        });
    });
    return { Number: Number };
})().Number;
//# sourceMappingURL=GlMetricCard.js.map