"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);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlHero = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-namespace */
/* eslint-disable @typescript-eslint/ban-types */
var theme_1 = require("./theme");
var GlImage_1 = require("./utils/GlImage");
var react_1 = require("react");
var theme_2 = require("./theme");
var onyxia_ui_1 = require("onyxia-ui");
var framer_motion_1 = require("framer-motion");
var theme_3 = require("./theme");
var GlArrow_1 = require("./utils/GlArrow");
exports.GlHero = react_1.memo(function (props) {
    var title = props.title, subTitle = props.subTitle, className = props.className, imageSrc = props.imageSrc, linkToSectionBelowId = props.linkToSectionBelowId, hasImageShadow = props.hasImageShadow, imageSources = props.imageSources, classesProp = props.classes;
    var _a = __read(react_1.useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
    var textWrapperVariant = react_1.useMemo(function () { return ({
        "show": {},
        "hidden": { "opacity": 0 },
    }); }, []);
    var textVariant = react_1.useMemo(function () { return ({
        "show": {},
        "hidden": {
            "x": -150,
            "opacity": 0,
        },
    }); }, []);
    var imageAnimProps = react_1.useMemo(function () { return ({
        "transition": {
            "delay": 1,
            "duration": 0.5,
        },
        "initial": {
            "opacity": 0,
        },
        "animate": {},
    }); }, []);
    var _b = useStyles({
        "hasOnlyText": imageSrc === undefined,
    }), classes = _b.classes, cx = _b.cx;
    onyxia_ui_1.useSplashScreen({
        "onHidden": function () {
            textWrapperVariant.show = {
                "transition": {
                    "staggerChildren": 0.5,
                },
                "opacity": 1,
            };
            textVariant.show = {
                "opacity": 1,
                "x": 0,
                "transition": {
                    "duration": 1,
                    "ease": "easeOut",
                },
            };
            imageAnimProps.animate = {
                "opacity": 1,
            };
            forceUpdate();
        },
    });
    return (jsx_runtime_1.jsxs("section", __assign({ className: cx(classes.root, className) }, { children: [jsx_runtime_1.jsxs("div", __assign({ className: cx(classes.textAndImageWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.textAndImageWrapper) }, { children: [(title !== undefined || subTitle !== undefined) && (jsx_runtime_1.jsxs(framer_motion_1.motion.div, __assign({ variants: textWrapperVariant, initial: "hidden", animate: "show", className: cx(classes.textWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.titleAndSubTitleWrapper) }, { children: [title !== undefined && (jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({ variants: textVariant }, { children: jsx_runtime_1.jsx(HeroText, __assign({ className: cx(classes.title, classesProp === null || classesProp === void 0 ? void 0 : classesProp.title) }, { children: title }), void 0) }), void 0)),
                            subTitle !== undefined && (jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({ variants: textVariant }, { children: jsx_runtime_1.jsx(theme_1.Text, __assign({ typo: "subtitle", className: cx(classes.subtitle, classesProp === null || classesProp === void 0 ? void 0 : classesProp.subtitle) }, { children: subTitle }), void 0) }), void 0))] }), void 0)),
                    imageSrc !== undefined && (jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({}, imageAnimProps, { className: cx(classes.imageWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.imageWrapper) }, { children: jsx_runtime_1.jsx(GlImage_1.GlImage, { className: cx(classes.image, classes.image), hasShadow: hasImageShadow, height: imageSrc.endsWith(".mp4") ? undefined : 800, url: imageSrc, alt: "hero image", imageSources: imageSources }, void 0) }), void 0))] }), void 0),
            linkToSectionBelowId !== undefined && (jsx_runtime_1.jsx("div", __assign({ className: cx(classes.arrowWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.linkToSectionBelowWrapper) }, { children: jsx_runtime_1.jsx(GlArrow_1.GlArrow, { className: classesProp === null || classesProp === void 0 ? void 0 : classesProp.linkToSectionBelow, direction: "down", hasCircularBorder: true, link: {
                        "href": "#" + linkToSectionBelowId,
                    } }, void 0) }), void 0))] }), void 0));
});
var useStyles = theme_2.makeStyles()(function (theme, _a) {
    var hasOnlyText = _a.hasOnlyText;
    return ({
        "root": {
            "position": "relative",
            "width": "100%",
            "paddingBottom": theme.spacing(7),
        },
        "textAndImageWrapper": __assign(__assign({ "padding": theme.spacing({
                "topBottom": 5,
                "rightLeft": 0,
            }), "display": "flex", "alignItems": "center", "justifyContent": "center" }, (theme.windowInnerWidth < theme_3.breakpointsValues.md
            ? {
                "flexDirection": "column",
                "alignItems": "left",
            }
            : {})), { "marginBottom": theme.spacing(6) }),
        "title": {
            "marginBottom": theme.spacing(4),
        },
        "subtitle": __assign({ "marginTop": theme.spacing(4), "maxWidth": 650, "color": theme.colors.useCases.typography.textSecondary }, (function () {
            if (theme.windowInnerWidth >= theme_3.breakpointsValues["lg+"]) {
                return undefined;
            }
            return theme.typography.variants["body 1"].style;
        })()),
        "textWrapper": __assign({ "textAlign": hasOnlyText && theme.windowInnerWidth >= theme_3.breakpointsValues.sm
                ? "center"
                : undefined, "display": "flex", "alignItems": hasOnlyText ? "center" : undefined, "flexDirection": "column", "flex": 1, "maxWidth": 1000 }, (function () {
            var value = theme.spacing(7);
            if (theme.windowInnerWidth >= theme_3.breakpointsValues.md) {
                return {
                    "marginRight": hasOnlyText ? undefined : value,
                };
            }
            return {
                "marginBottom": value,
            };
        })()),
        "imageWrapper": __assign({ "position": "relative", "flex": 1.5, "maxWidth": 800 }, (theme.windowInnerWidth < theme_3.breakpointsValues.md
            ? {
                "maxWidth": theme_3.breakpointsValues.md,
            }
            : {})),
        "image": {
            "width": "100%",
        },
        "arrowWrapper": {
            "display": "flex",
            "justifyContent": "center",
        },
    });
});
var HeroText = (function () {
    var HeroText = react_1.memo(function (props) {
        var children = props.children, className = props.className;
        var _a = useStyles(), classes = _a.classes, cx = _a.cx;
        return (jsx_runtime_1.jsx(theme_1.Text, __assign({ className: cx(classes.root, className), htmlComponent: "h1", typo: "body 1" }, { children: children }), void 0));
    });
    var useStyles = theme_2.makeStyles()(function (theme) { return ({
        "root": __assign({ "fontWeight": 700 }, (function () {
            var value = (theme.typography.rootFontSizePx / 16) *
                (function () {
                    if (theme.windowInnerWidth >= theme_3.breakpointsValues.xl) {
                        return 86;
                    }
                    if (theme.windowInnerWidth >= 600) {
                        return 52;
                    }
                    return 36;
                })();
            return {
                "fontSize": value,
                "lineHeight": value + "px",
            };
        })()),
    }); });
    return { HeroText: HeroText };
})().HeroText;
//# sourceMappingURL=GlHero.js.map